栅格小组件
使用栅格小组件可检查、查看和分析信息表源中的数据。数据源中的每个信息表列均显示为栅格中的一列。
ThingWorx 9.4 或更高版本中提供了以下配置：
• 在栅格工具栏上显示自定义操作。
• 突出显示添加到栅格中的新行。
• 动态配置 ShowRowNumbers 属性。
ThingWorx 9.3.7 或更高版本中提供了以下配置：
• 对栅格进行分页或更改页面时，保留选定行的 ID。
ThingWorx 9.3.6 或更高版本中提供了以下配置：
• 在单击超链接时触发事件，而不是打开 URL。例如，您可以传递链接数据并导航至混搭。
ThingWorx 9.3.4 或更高版本中提供了以下配置：
• 绑定子数据以创建具有多级父数据和子数据的分层树形栅格。
• 设置用户可在运行时展开的最大行数。
• 从高级栅格迁移旧版动态配置。
• 通过指定服务中某一行的 ID 自动展开行。
• 禁用父项行及其子项。
• 使用键盘导航时，配置焦点框的选择行为。
• 在“验证”面板上配置验证消息的可见性和图标。
ThingWorx 9.3 或更高版本中提供了以下配置：
• 启用栅格、行或单元格级别的编辑。
• 在运行时调整列的大小和重新排序列。
• 显示运行时菜单，以便用户在栅格上显示、隐藏和重新排序列。
• 定义验证规则和消息，以在启用编辑时验证输入。
• 在单独的列中显示行号。
• 设置栅格列的最小和最大宽度。
• 使用 JSON 配置数据动态配置小组件。
 |
必须将“栅格 (高级)”小组件的现有数据服务输出更新为 JSON。
|
• 添加页脚部分。
• 删除行后显示确认消息。此配置在 ThingWorx 9.3.1 或更高版本中可用。
以下是 ThingWorx 9.2 中可用配置的列表：
• 使用呈现器格式化数据列并应用状态格式。
• 按降序或升序对列数据进行排序。
• 使用筛选框筛选数据。
• 对齐标题和正文单元格中的内容。
• 显示行选择的复选框。
• 使用像素、百分比或分数值自动或手动设置列宽度。
• 将标题和正文以单行形式显示并防止文本换行。
• 设置栅格行的最小和最大高度。
• 在栅格上选择单行或多行。
此外，还可将栅格小组件与其他小组件搭配使用，例如“分页”、“数据片段筛选器”和“工具栏”，以在混搭中创建唯一的交互式数据视图。
|
|
“栅格”小组件也可用作 ThingWorx Web Component SDK 中的 Web 组件。
|
性能注意事项
栅格小组件支持包含上百万行数据的大型数据集。然而，显示上百万行的数据会影响加载速度，并使得查找和分析信息变得异常困难。以下是栅格小组件的最佳做法：
• 避免创建包含上百万行数据的数据表。
• 设置适当的最小和最大行高以便于显示数据行。
• 使用分页功能将大型数据集拆分为多个页面，并允许用户控制每个页面上显示的行数。
栅格小组件剖析
1. 标题
2. 栅格筛选器区域
3. 标题行
4. 正文行
5. 行选择复选框
6. 列排序按钮
键盘按键
键 | 栅格 | 树形栅格 |
|---|---|---|
TAB | 更改焦点框以突出显示标题中的主要栅格元素，例如筛选器、选择复选框和排序按钮等。 | 更改焦点框以突出显示标题中的主要栅格元素，例如筛选器、选择复选框和排序按钮等。可使用 Focus 配置焦点。 |
箭头键 | 使用上、下、左和右箭头键可竖直或水平更改焦点。 | 右 - 展开聚焦行。 左 - 折叠聚焦行。 上和下 - 移至下一个和上一个聚焦行或单元格。 |
HOME END | 聚焦当前行中的第一个或最后一个单元格。 | 聚焦第一个或最后一个单元格或行。 |
PAGE UP PAGE DOWN | 聚焦当前列或行中的第一个或最后一个可见单元格。 | 聚焦当前栅格视图中的第一个或最后一个可见单元格或行。 |
SPACE ENTER | 触发 RowClicked 事件，或在启用行选择时选择当前行。 | 展开或折叠父项行。 |
下表列出了 ThingWorx 9.4 或更高版本中可用的栅格小组件的属性：
属性名称 | 说明 | 基本类型 | 默认值 | 可绑定 | 可本地化 | ||
|---|---|---|---|---|---|---|---|
RowSelected | 当选择栅格上的一行或多行时，返回 True。例如，借助此属性，可以在选择了一行或多行时在工具栏上显示自定义操作。 | BOOLEAN | False | Y | N | ||
ToolbarActionsData | 用于定义要在栅格工具栏上显示的自定义操作的信息表。将服务绑定到此属性时，会将每个自定义操作的其他属性添加到“属性”面板中。 | Infotable | Y | N | |||
ToolbarActionsPosition | 控制工具栏自定义操作相对于栅格上编辑、添加和删除按钮的位置。选项：“无”、“之前”、“之后”。
| STRING | 之后 | N | |||
HighlightNewRows | 突出显示在运行时添加到栅格中的新行。 | BOOLEAN | False | N | N |
下表列出了 ThingWorx 9.3.7 及更高版本中提供的小组件属性：
属性名称 | 说明 | 基本类型 | 默认值 | 可绑定 | 可本地化 | ||
|---|---|---|---|---|---|---|---|
SelectedRowsIDs | 包含栅格上所有选定行的 IDFieldName 值的信息表。栅格数据已分页时，此属性会返回所有页面中选定的 ID 值。可以使用此属性在页面发生更改时保留选定行。
| Infotable | 不适用 | Y | N |
下表列出了 ThingWorx 9.3.6 及更高版本中提供的小组件属性：
属性名称 | 说明 | 基本类型 | 默认值 | 可绑定 | 可本地化 |
|---|---|---|---|---|---|
LinkClicked | 单击栅格单元格中的超链接时触发的事件。 | 事件 | 不适用 | Y | N |
ClickedLinkData | 包含超链接行数据的信息表。 | Infotable | 不适用 | Y | N |
ClickedLinkColumn | 返回上次单击的超链接的列名称。当栅格包含多个带有超链接的列时，可以使用此属性。 | STRING | 不适用 | Y | N |
下表列出了 ThingWorx 9.3.4 或更高版本中可用的栅格小组件的属性：
属性名称 | 说明 | 基本类型 | 默认值 | 可绑定 | 可本地化 | ||
|---|---|---|---|---|---|---|---|
ChildData | 可定义展开树节点时动态加载子节点的数据源的信息表。仅适用于树形栅格。 | Infotable | 不适用 | Y | N | ||
ParentIDFieldName* | 在树形栅格数据中指定信息表列，其中包含每个子项的父项 ID。此 ID 可用于创建层次树结构。仅适用于树形栅格。 | STRING | parentId | Y | N | ||
HasChildrenFieldName* | 指定用于指示行是否具有可用子项数据的信息表列名称。 要指示某一行不具有子项，请输入下列内容之一：‘0’、0、‘false’、false、空字符串或 undefined。 任何其他值均表示该行具有子项。仅适用于树形栅格。 | STRING | hasChildren | N | N | ||
IncludeRowExpansionParents* | 确定在选择或展开子项行时，是否包括预加载客户端数据中未包括的父项行。当值为 True 时，将检索包含子项行的父项行，并保留其层次结构。仅适用于树形栅格。 | BOOLEAN | False | N | Y | ||
ExpandableRows | 包含可展开树节点的 ID 的信息表。要使栅格行具有可展开性，只需具备行 ID 列便可。选择 AlwaysExpanded 后，将忽略此数据并展开所有行。仅适用于树形栅格。 | Infotable | 不适用 | Y | N | ||
AlwaysExpanded* | 展开栅格上的所有树节点。 要使用 PreserveRowExpansion 属性，请将此属性设置为 False。仅适用于树形栅格。 | BOOLEAN | False | N | N | ||
ExpandCollapseAll* | 添加可用于展开和折叠栅格上所有树节点的控件。仅适用于树形栅格。
| BOOLEAN | False | N | N | ||
PreserveRowExpansion* | 刷新栅格时保留展开行。 当 AlwaysExpanded 为真时，将展开所有预加载行。更改栅格视图或在页面间导航时，必须将 CacheRuntimeChanges 属性设置为保留展开行。仅适用于树形栅格。 | BOOLEAN | False | N | N | ||
ExpandCollapseIcon* | 控制在无数据绑定至 ChildData 属性时用于展开和折叠栅格上树节点的图标类型。仅适用于树形栅格。支持的选项：“脱字符”、“箭头”、“正/负” | STRING | “脱字符” | N | N | ||
ExpandLoadedRows | 启动栅格后将自动展开所有预加载数据。必须关闭此属性才能使用 PreserveRowExpansion 属性。仅适用于树形栅格。 | BOOLEAN | False | Y | N | ||
SelectFocusedItem* | 当值为 true 时，焦点框将用于选择项。当值为 false 时，将单独设置聚焦和选定状态。仅适用于树形栅格。 | BOOLEAN | False | N | N | ||
SelectParentOnly | 选择父项后，将禁用子节点的自动选择。仅适用于树形栅格。 | BOOLEAN | N | N | |||
FocusNavigationMode* | 控制更改焦点后最先聚集的元素。可首先导航至行、首先导航至单元格或仅导航至单元格。仅适用于树形栅格。 | STRING | “先转至行” | N | N | ||
PrimaryColumnFixedSize* | 禁用为主列调整大小，并将其设置为固定大小。仅适用于树形栅格。如果 ResizeColumns 为 true，则将忽略此属性。 | BOOLEAN | False | N | N | ||
IDPathSeparator* | 可用于指定分隔 ID 路径的字符。 路径分隔符可在树形栅格中使用，用于选择由栅格动态加载但尚未在客户端加载的行。仅适用于树形栅格。 | STRING | :; | N | N | ||
AllowDisabledNodes | 可用于禁用树形栅格节点。 | BOOLEAN | False | N | N | ||
DisableChildNodes | 禁用已禁用父项节点的子项行。 | BOOLEAN | False | N | N | ||
DisabledStateField | 指定用于为树形栅格的每一行设置已禁用状态的信息表列。 | INFOTABLE | 不适用 | N | N | ||
LegacyConfiguration | 可用于通过配置字符串而非小组件属性动态配置栅格的可绑定属性。此属性旨在支持从“高级栅格”小组件进行迁移。要添加新配置，请改用 JSON 配置属性。 | STRING | 不适用 | Y | N | ||
ResetButtonClicked | 单击“重置”按钮时触发的可绑定事件。 | 事件 | 不适用 | Y | N |
下表列出了 ThingWorx 9.3 或更高版本中可用的栅格小组件的属性：
| | 动态栅格配置支持以星号 (*) 标记的属性。有关动态配置的详细信息，请参阅使用 JSON 数据配置栅格。 |
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? | 是否可本地化? (Y/N) |
|---|---|---|---|---|---|
IsEditable* | 允许用户在运行时编辑栅格数据。默认情况下，在将编辑模式应用到整个栅格时，系统会自动保存栅格数据。 | BOOLEAN | False | In/Out | N |
EditLevel* | 控制用户在运行时编辑栅格数据的方式。选择“整个栅格”同时编辑和保存所有更改，选择“单行”每次编辑和保存其中一行的更改，或选择“一个单元格”每次编辑和保存其中一个单元格的更改。 | STRING | 一个单元格 | 否 | N |
EditButton* | 在栅格工具栏上显示编辑控件，以便用户打开或关闭编辑功能。 | BOOLEAN | False | 否 | N |
RowAddButton* | 在栅格工具栏上显示添加按钮，以便用户使用表单为栅格添加新行。 | BOOLEAN | False | 否 | N |
RowDeleteButton* | 在栅格工具栏上显示一个按钮，以便用户删除选定行。 | BOOLEAN | False | 否 | N |
ConfirmDelete | 一种可绑定服务，用于将删除行按钮绑定到 Confirmation 函数。 | 服务 | 不适用 | In | N |
DeleteRowClicked | 单击栅格工具栏上的删除行按钮后触发的事件。 | 事件 | 不适用 | Out | N |
RowEditFormTitle* | 指定要为行编辑表单显示的标题。要隐藏标题并使用表单区域，请将其留空。 | STRING | 不适用 | In | Y |
EditControlVisibility* | 指定何时在栅格上显示编辑控件。支持的选项为：“悬停或具有焦点时”、“始终”、“无”。 | STRING | “悬停或具有焦点时” | In | N |
EditControlType* | 用于设置：编辑栅格所用的控制元素。可用选项为“图标”或“链接”。您可以使用 EditControlIcon 和 EditControlLabel 属性选取图标或设置链接文本。 | STRING | 链接 | 否 | N |
EditControlLabel* | 当 EditControlType 设为“链接”时，设置编辑控件的标签。 | STRING | 编辑 | In | Y |
EditControlIcon* | 当 EditControlType 设为“图标”时，将为编辑控件显示的图标。 | IMAGE | 不适用 | 否 | N |
EditCellStarted | 用户开始栅格单元格编辑时触发的事件。 | 事件 | 不适用 | Out | N |
EditCellCompleted | 用户完成栅格单元格编辑时触发的事件。 | 事件 | 不适用 | Out | N |
EditRowStarted | 用户开始栅格行编辑时触发的事件。 | 事件 | 不适用 | Out | N |
EditRowCompleted | 用户完成栅格行编辑时触发的事件。 | 事件 | 不适用 | Out | N |
EditCanceled | 用户单击取消按钮时触发的事件。 | 事件 | 不适用 | Out | N |
Cancel | 一种可绑定的数据服务，用于取消对栅格的当前编辑而不保存。 | 服务 | 不适用 | In | N |
EditStarted | 单击编辑按钮时触发的事件。 | 事件 | 不适用 | Out | N |
EditCompleted | 编辑后单击“保存”按钮时触发的事件。 | 事件 | 不适用 | Out | N |
EditedData | 包含栅格中已编辑项的信息表。 | INFOTABLE | 不适用 | Out | N |
DeletedData | 包含栅格中已删除项的信息表。要从服务器中删除数据，请将信息表绑定到自定义数据服务。 | INFOTABLE | 不适用 | Out | N |
HighlightDraftState | 在单元格级别上进行编辑时，使用不同颜色突出显示包含未保存更改的单元格。 | BOOLEAN | False | 否 | N |
ShowValidationSuccess* | 当输入的数据验证成功后，显示成功消息。 | BOOLEAN | False | 否 | N |
ValidationSuccessIcon* | 显示在成功消息旁边的图标。 | 媒体选取器 | 成功图标 | 否 | N |
ShowValidationFailure* | 当输入的数据验证未通过时，显示失败消息。 | BOOLEAN | False | 否 | N |
ValidationFailureIcon* | 显示在失败消息旁边的图标。 | 媒体选取器 | 信息图标 | 否 | N |
ShowValidationCritera* | 当编辑栅格上的单元格时，对于必需的输入模式显示提示消息。 | BOOLEAN | False | 否 | N |
ValidationCriteriaIcon* | 显示在验证条件提示消息旁边的图标。 | 媒体选取器 | 信息图标 | 否 | N |
ShowFooter* | 向栅格添加页脚区域。 | BOOLEAN | False | 否 | N |
ShowHeaderRowInFooter* | 当 ShowFooter 设置为 True 时，在栅格页脚中显示标题行。 | BOOLEAN | False | 否 | N |
FooterData* | 包含栅格页脚配置数据的信息表。 | INFOTABLE | 不适用 | In | N |
ShowRowNumbers* | 在栅格上的单独列中显示行号。 | BOOLEAN | False | 不适用 | N |
ColumnsMenuOptions* | 控制在运行时显示在列配置菜单中的选项。选择“无”可隐藏菜单。 • “无”- 隐藏菜单按钮。 • “可见性”- 在每个列名称旁边显示用于控制列可见性的复选框。 • “顺序”- 在每个列名称旁显示用于对列进行重新排序的拖动图标。 • “可见性和顺序”- 显示上述两个选项。 | STRING | “无” | 否 | N |
ColumnsMenuVisibleItems* | 设置在运行时打开列配置菜单时，最初显示的项的数量。使用此属性可限制菜单高度。如有附加列，将显示滚动条。 | NUMBER | 6 | 否 | N |
下表列出了 9.2 或更高版本中栅格小组件的属性：
属性 | 说明 | 基本类型 | 默认值 | 绑定 | 可本地化 | ||
|---|---|---|---|---|---|---|---|
CacheRuntimeChanges | 在浏览器缓存中存储栅格排序选项，当用户导航至不同的页面或混搭时，这些选项仍会存留。 | BOOLEAN | True | 不适用 | N | ||
ClearFilteredSelection | 控制在对栅格数据进行筛选或排序时是否保留行选择。启用此属性可在选定行位于栅格视图外时清除选择。
| BOOLEAN | 不适用 | 不适用 | N | ||
Data | 要在运行时查看栅格期间显示的信息表数据源。 | INFOTABLE | 不适用 | In | N | ||
DefaultSelectedRows* | 指定在加载栅格时预先选择的行号。可键入数字范围，例如 1-10，或以逗号为分隔符的列表，例如 2、4、5。
| STRING | 不适用 | In | N | ||
ShowFilter | 在栅格上显示筛选器框。 | BOOLEAN | False | Y | N | ||
Filter | 对栅格进行排序或筛选时触发的事件。 | 事件 | 不适用 | 不适用 | N | ||
FilterLabel* | 用于设置筛选框的标签。 | STRING | 不适用 | In | Y | ||
FilterString* | 简单筛选框的筛选器字符串。 | STRING | 不适用 | In/Out | N | ||
HideHeaderRow* | 隐藏标题行。 | BOOLEAN | False | In | N | ||
IDFieldName* | 选择包含主键或栅格行 ID 的信息表列。 | STRING | id | 不适用 | N | ||
Label* | 用于指定栅格标签的文本。 | STRING | “栅格标题” | In | Y | ||
LabelType* | 用于设置栅格标签类型。 | STRING | “子页眉” | 不适用 | N | ||
LastClickedRow | 信息表，包含栅格中上一次单击的行的数据。 | INFOTABLE | 不适用 | 不适用 | N | ||
MaxHeaderHeight | 栅格标题的最大高度 (单位：像素)。 | NUMBER | Auto | In | N | ||
MaxRowHeight | 用于指定栅格中行的最大高度 (单位：像素)。默认情况下将基于每行的内容设置高度值。 | NUMBER | Auto | In | N | ||
MinRowHeight | 用于指定栅格中行的最小高度 (单位：像素) | NUMBER | 48 | In | N | ||
QueryFilter | 可绑定属性，包含应用于栅格数据的筛选器查询。可将此属性绑定到“数据筛选器”小组件，或绑定到栅格上用于筛选数据的数据服务。 | QUERY | 不适用 | In/Out | N | ||
Reset | 可绑定服务，用于在运行时将栅格小组件重置为其初始配置。 | 服务 | 不适用 | 不适用 | N | ||
RowClicked | 栅格中的行被点击时触发的事件。 | 事件 | 不适用 | 不适用 | N | ||
RowFormat | 打开一个对话框，用户可于其中选择可应用至栅格行的状态定义。可通过将状态格式应用于小组件配置对话框中的列来覆盖单元格的此状态格式。 | 状态定义 | 不适用 | 不适用 | N | ||
RowSelection* | 用于控制用户每次可选择的栅格数据行的数目。可用选项包括： “无”(默认)、“单行”和“多行”。 | STRING | “无” | In | N | ||
SelectedRows | 信息表属性，用于设置或检索栅格上的选定数据行。在分页栅格中的页面之间移动时，此属性不会保留选定的行数据。要传递所有页面中的选定行，请改为使用 SelectedRowsIDs 属性。 | INFOTABLE | 不适用 | In/Out | N | ||
SelectedRowsChanged | 当选定的行更改时触发的事件。 | 事件 | 不适用 | 不适用 | N | ||
SelectedRowsChangedCallback* | 用于在手动或使用数据服务更改所选行时触发 SelectedRowsChanged 事件。设置为 False 后，事件仅在手动更改行选择时触发。 | BOOLEAN | True | 不适用 | |||
SelectionCheckBoxHeaderAlignment | 用于控制标题行中选择复选框的垂直对齐。 | STRING | 上 | 不适用 | N | ||
SelectionCheckboxRowAlignment | 用于控制行选择列中复选框的垂直对齐。 | STRING | 上 | 不适用 | N | ||
SingleLineHeader* | 用于在一行内显示标题行文本。当文本超出可用空间时将被截断。默认情况下，标题文本可在多行显示。 | BOOLEAN | False | In | N | ||
SingleLineRows* | 在一行内显示每个栅格行的内容。若无法在一行内显示完整内容，则显示省略号。默认情况下，内容可在多行显示。
| BOOLEAN | False | In | N | ||
SortSelectionColumn* | 向复选框选择列添加排序按钮。这可以让您根据数据行是否已选中对其进行排序。 | BOOLEAN | False | 不适用 | N | ||
TabSequence | 按 TAB 键时小组件的序号。 | NUMBER | 0 | 不适用 | N |