Mashup Builder > 小组件 > 高级栅格 > 使用树形栅格数据
使用树形栅格数据
使用树加载数据服务
在树形栅格中,数据父节点与子节点之间的关系增加了查询和筛选任务的复杂性。为了简化此过程,大部分功能都是在一个 JavaScript 数据服务中编码的,其中一个示例在 高级栅格示例文件中提供。可以将所提供的 Javascript 代码以整体或片段形式添加到服务中,以在您自己的混搭中支持树形栅格功能。
必要时,还可以将示例数据服务中所述的 API 实现转换为基于 java 的服务。请确保输入参数名称保持不变,并且返回的信息表包含服务中所需的每个 API 的对应行列表。
必须将此数据服务绑定到您的栅格,才能充分利用树形栅格功能,例如:
使用可选查询和数据筛选器参数加载初始子数据。
根据指定的展开路径 (leafID) 自动展开行。
搜索与指定查询参数匹配的子数据。
使用数据筛选器小组件筛选与指定筛选器查询参数相匹配的子数据。
要使用提供的 GetPartsData 示例树加载数据服务,必须对其稍作自定义 (使其指向数据的位置),然后将其添加到 Composer 中的事物并绑定到栅格。请按照以下步骤执行:
1. 使用 高级栅格示例文件部分中的信息来保存示例并将其导入到 ThingWorx Composer 中。
2. 用于树形栅格功能的示例数据服务为 GetPartsData。要进行查找,请按以下步骤操作:
a. 导航至“建模”/“事物”,并打开 GridAdvancedExampleServices 事物。
b. 单击左侧面板中的“服务”,随即显示所提供的示例服务。
c. 选择 GetPartsData 服务,然后单击“编辑”以查看脚本窗口。
d. 单击“全屏”,以便更易于查看。
3. 在脚本 Your Data Store 部分中,自定义 getEntriesFromDataStore 函数,使其指向您的子数据源的位置。请参阅下图。
如果源为数据表,则仅在 YOUR_DATATABLE_THING 变量中更新此表的名称。
如果源为数据流、数据形状或第三方平台,则相应地更新 getEntriesFromDataStore 函数。
4. 在此脚本的行部分,请确保不具有父项行的任何顶行的 parentId 值均为 "/"。此值表示根级别,因此,需确保 GetPartsData 服务可正确排序和搜索数据。
如果希望使用不同的值来指示根级别,请修改此脚本顶部的 ROOT_ID_VALUE 参数。可以使用任何非空字符串,例如:/Root// 或单个空格
5. 保存所做更改。现在,您可以按原样使用此服务,也可以将此脚本复制并粘贴到 Composer 内您所拥有的事物上的服务。
6. 在 Mashup Builder 中创建树形栅格时,可在右侧面板中将数据服务添加为另一实体。
7. 在右侧面板数据服务实体中的“返回的数据”下,将“所有数据”拖动到栅格中,并将其绑定到 DataChildData 属性。您可以将数据和子数据连接到相同或不同的源。
8. FilterFilter Query 属性绑定到数据服务,以便可以组合所有排序、搜索和筛选参数,并可输出相应的结果。
9. 保存并查看已完成的混搭。