将栅格小组件添加至混搭
添加栅格
1. 将“栅格”小组件从“小组件”面板拖至工作区中的容器。
2. 在“数据”面板上,添加一个返回信息表的数据服务。
3. 展开面板上的数据服务,然后在“已返回数据”下,将数据服务的 All Data 属性绑定至栅格小组件的 Data 属性。实心箭头表示信息表已绑定至栅格。
4. 在
“属性”面板上,单击
![](../../../../ThingWorx/images/MBConfigureItem.png)
打开小组件配置对话框。
5. 配置栅格列,然后单击
“完成”。有关可用列配置的详细信息,请参阅
配置栅格列。
6. 单击“保存”,然后查看混搭。服务信息表中的数据显示于栅格中。
添加树形栅格
1. 将“栅格”小组件从“小组件”面板拖至工作区中的容器。
2. 在“数据”面板上添加一个数据服务,以返回包含栅格上父项节点数据的信息表。此数据应包含欲最先显示的数据。
3. 展开面板上的数据服务,然后在“已返回数据”下,将数据服务的 All Data 属性绑定至栅格小组件的 Data 属性。实心箭头表示信息表已绑定至栅格。
4. 重复步骤 2 添加第二个数据服务,以返回包含父项节点子数据的信息表。此数据信息表包含欲在展开父项时显示的数据。
| 使用同一服务中的父数据和子数据时,会将服务的“所有数据”属性绑定至 Data 和 ChildData 属性。 |
5. 展开面板上的数据服务,然后在“已返回数据”下,将数据服务的 All Data 属性绑定至栅格小组件的 ChildData 属性。
6. 在“属性”面板上,配置以下内容:
◦ 单击
![](../../../../ThingWorx/images/MBConfigureItem.png)
打开小组件配置对话框。可针对栅格列隐藏、重新排序、重命名或应用验证
◦ 将 IDFieldName 属性设置为包含子行 ID 的信息表列的名称。
◦ 将 ParentIDFieldName 属性设置为包含父行 ID 的信息表列的名称。
◦ 将 HasChildrenFieldName 属性设置为指定行是否包含子数据的名称信息表列。
7. 绑定事件以在运行时执行栅格数据服务。
8. 单击“保存”,然后查看混搭。服务信息表中的数据显示于栅格中。
配置树形栅格数据
要创建树形栅格结构,必须使用以下格式绑定信息表数据。
可将数据和子数据连接到相同或不同的源。可将属性作为一个信息表绑定至小组件 Data 属性,或将父数据绑定至 Data 属性,将子数据绑定至 ChildData 属性。以下为父数据信息表格式示例:
id | 洲 | hasChildren |
---|
1 | 亚洲 | true |
2 | 欧洲 | true |
3 | 北美洲 | true |
4 | 南美洲 | true |
5 | 南极洲 | false |
以下为子数据信息表格式示例:
id | parentId | 洲 | 国家 | 人口数量 | hasChildren |
---|
1 | 2 | | 德国 | 8300 万 | false |
2 | 2 | | 瑞典 | 1000 万 | false |
3 | 2 | | 英国 | 6700 万 | false |
4 | 2 | | 意大利 | 6000 万 | false |
5 | 1 | | 韩国 | 5100 万 | false |
6 | 3 | | 美国 | 3 亿 3100 万 | false |
7 | 3 | | 加拿大 | 3700 万 | false |
8 | 4 | | 巴西 | 2 亿 1200 万 | false |
9 | 4 | | 秘鲁 | 3300 万 | false |
10 | 1 | | 日本 | 1 亿 2600 万 | false |
运行时,展开父项行的同时也会显示子项行。