向栅格工具栏中添加自定义操作
在 ThingWorx 9.4 或更高版本中，您可以定义要在栅格工具栏上显示的自定义操作。
概述
• 按钮
• 下拉列表
• 链接
• 切换按钮
配置栅格小组件工具栏的自定义操作
1. 在 Composer 中创建数据服务，使其返回操作定义所需数据的信息表。有关受支持的数据格式的详细信息，请参阅示例：示例工具栏配置。
2. 在 Mashup Builder 中，使用“数据”面板将服务添加到混搭。
3. 将服务信息表绑定到栅格小组件的 ToolbarActions 属性。自定义操作的其他属性将在“属性”面板上列出。
4. 在“属性”面板上，配置工具栏操作：要创建内部小组件绑定，请使用绑定配置对话框。
5. 单击“保存”，然后单击“查看混搭”。
自定义操作属性
下表列出了可添加到栅格小组件的每种自定义操作类型的属性。
|
操作类型
|
属性/事件名称
|
说明
|
示例
|
|---|---|---|---|
|
按钮
|
<actionId>_Clicked
|
单击按钮时触发的事件。
|
Button1_Clicked
|
|
<actionId>_Disabled
|
禁用工具栏上的按钮。
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
控制工具栏上按钮的可见性。
|
Button1_Visible
|
|
|
下拉列表
|
<actionId>_Disabled
|
禁用工具栏上的下拉列表。
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
此可绑定属性可用于设置和检索下拉列表操作中选定文本的值。
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
下拉列表中的选定项发生更改时触发的事件。
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
控制工具栏上下拉列表的可见性。
|
Dropdown1_Visible
|
|
|
链接
|
<actionId>_Disabled
|
禁用工具栏上的链接。
|
Link1_Disabled
|
|
<actionId>_Visible
|
控制工具栏上链接操作的可见性。
|
Link1_Visible
|
|
|
切换按钮
|
<actionId>_Disabled
|
禁用工具栏上的切换按钮。
|
Toggle1_Disabled
|
|
<actionId>_State
|
此可绑定属性可用于设置和检索切换按钮操作的状态。
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
切换按钮状态更改时触发的事件。
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
控制工具栏上切换按钮操作的可见性。
|
Toggle1_Visible
|
示例：创建服务以配置栅格工具栏的自定义操作
以下示例显示了用于在栅格工具栏上创建以下自定义操作的服务：
• 用于控制行高的下拉列表。
• 用于控制行号可见性的切换按钮。
• 用于导出栅格上所选行的导出按钮。
在 Composer 中创建数据服务，使其返回包含自定义操作所需数据的信息表。有关受支持的数据格式的详细信息，请参阅使用信息表定义工具栏操作。
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
在 Mashup Builder 中创建以下绑定：
• 要控制栅格行的高度，请将 SelectedText 下拉列表属性绑定到表达式函数，以将字符串基本类型转换为数字。然后，可以将 MinRowHeight 函数的输出绑定到栅格属性。
• 要控制行号的可见性，请将切换按钮的 T1_State 属性绑定到 ShowRowNumbers 栅格属性。
• 要在选择行时显示导出按钮，请将 RowsSelected 栅格属性绑定到 B1_Visible 按钮属性。
有关自定义操作的可用配置选项的详细信息，请参阅示例：示例工具栏配置。