使用 JSON 数据配置栅格
除了小组件属性和列配置属性外，您还可以通过以下方式使用 JSON 数据动态地配置栅格小组件属性：
• 创建生成配置数据的自定义数据服务。
• 将配置数据手动添加到 Mashup Builder 中的小组件 Configuration 属性。
使用 JSON 数据服务
要在使用动态配置的栅格上显示数据，必须通过以下方式之一创建配置数据：
• 在 Composer 中为某一事物创建一个新服务并编写 JavaScript 数据服务。您可以使用可用的代码片段和其他有用的快捷方式。
• 在您首选的任何文本编辑器中编写 JavaScript 服务，然后将其复制到 Composer 中某一事物上新数据服务的代码编辑器中。
• 将可用于栅格 (高级) 的示例输出更改为 JSON 格式。
要在 ThingWorx Composer 中使用导入的示例配置服务，请按以下步骤操作：
1. 在 Composer 中，浏览至“建模”/“事物”，然后打开事物 GridAdvancedExampleServices。
2. 打开左侧面板中的“服务”选项卡，可用示例服务将会显示在右侧。
3. 选择任一配置服务，然后单击“编辑”以查看脚本代码。
4. 编辑脚本，然后将其保存。有关详细信息，请参阅“JSON 配置属性”部分。
要使用数据服务配置栅格：
1. 在 Composer 中，创建新事物实体以及用于存储动态配置数据的数据服务。
2. 在服务中，创建 JavaScript 配置服务并将输出设置为 JSON。
3. 在 Mashup Builder 中，使用“数据”面板添加您在步骤 1 中所创建事物的配置服务。
4. 在“数据”面板上，展开数据服务，然后在“已返回数据”下展开“所有数据”，并将 JSON 输出绑定到栅格小组件的 Configuration 属性。
 |
将配置服务绑定到栅格时，小组件属性将自动隐藏。如果取消配置服务的绑定，则其他属性会再次显示。
|
5. 保存并查看已完成的混搭
要使用 JSON 数据手动配置栅格：
1. 在 Mashup Builder 中，选择工作区内的栅格小组件或使用“资源管理器”面板对其进行选择。
2. 在“属性”面板上，单击小组件 Configuration 属性旁的“添加”。将打开一个配置对话框。
3. 键入或粘贴包含栅格所需配置数据的 JSON 对象。
4. 单击“完成”。这些配置即会应用至栅格。
5. 单击“保存”以保存混搭。
JSON 配置属性
以下各节将介绍栅格的可用 JSON 配置属性。
列配置属性
此属性包含栅格上列的定义，如列标题和排序顺序。
大多数列定义属性很容易与 Mashup Builder 中提供的相应属性匹配。但是，只有当栅格的数据源与数据形状相关联时，Mashup Builder 中才会提供以下列定义属性。这样，以下属性便与“配置栅格列”对话框中的类似选项相对应：
• hidden - 定义特定栅格列最初在视图中是可见还是隐藏。在运行时，您可以使用列显示菜单显示或隐藏列。此属性对应于小组件配置对话框中的“显示”属性。
• inLayout - 用于定义特定栅格列在运行时是否可见。设置为 false 时，最终用户在运行时看不到此列，且无法控制其可见性。但是，您仍可以使用列数据进行状态格式化。此属性对应于小组件配置对话框中的 Exclude 属性。
|
|
可通过将本地化标记放在双方括号中来本地化 JSON 脚本中的列标题。在运行时，系统将使用存储在本地化表中的值来翻译标记化的值。
|
"columns": {
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
在 ThingWorx 9.3.6 或更高版本中，您可以使用 routeLinks 属性来通过 LinkClicked 事件路由链接数据。
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
在 ThingWorx 9.4 或更高版本中，您可以在动态配置中使用 showRowNumbers 属性。
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
行配置属性
配置行属性，如默认行选择、行高和基于行的状态格式。
"rows": {
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"rowFormatter": {
"stateDefinition": {
…
}
}
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"rowFormatter": {
"stateDefinition": {
…
}
}
树形栅格配置属性
ThingWorx 9.3.4 或更高版本中提供了以下配置。
"treeSettings": {
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
工具栏配置属性
"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
样式配置属性
用于控制栅格外观的可选样式属性，例如背景颜色、边框样式、字体和状态特定样式。您可以定义和使用要应用于状态格式的样式。
"styles": {
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
|
|
仅当使用服务进行配置时，才能控制字体属性。字体选择并非 Mashup Builder 中提供的属性。
|
小组件标签
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
编辑模式和按钮
您可以在 editButtons 下配置栅格编辑功能。
"editButtons": {
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
列配置菜单
"columnsMenu": {
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
确认
"validation" : {
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
常规选项
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true