列表小组件 (可应用主题)
列表小组件可用于显示数据行。
 |
“列表”小组件可在平台中作为标准小组件使用，也可用作 web 组件 (可从 SDK 导入)。
|
数据格式
可使用格式为以下结构的信息表中的数据来配置列表小组件项：
|
字段定义
|
显示字段
|
值字段
|
状态字段
|
|---|---|---|---|
|
说明
|
表示运行时列表项的标签。
|
表示列表项的实际值。该值也存储在 SelectedText 属性中。
|
表示列表中项状态的可选信息表字段。此属性可用于启用或禁用列表中的项。支持的值：Enabled 或 Disabled
|
|
基本类型
|
STRING 或 NUMBER
|
STRING 或 NUMBER
|
STRING
|
定义列表项
要定义列表项，请绑定使用所需数据格式格式化的信息表。
1. 在“数据”面板上，添加一个用于定义小组件列表项的数据服务。可使用之前介绍的信息表格式来定义项。
2. 将数据服务的 All Data 属性绑定至列表小组件的 Data 属性。即会创建绑定。
3. 在“属性”面板上，为以下各属性选择信息表字段：
◦ DisplayField - 项标签的数据。
◦ ValueField - 项标签的实际值。
◦ StateField - 用于定义各数据项启用或禁用状态的可选字段。
4. 单击“保存”，然后单击“查看混搭”。
在运行时，列表项会显示在小组件内。
启用多项选择
可通过将小组件 MutliSelect 属性设置为 true 来启用列表中的多项选择。多项选择添加了允许用户在列表中选择一个或多个项的复选框。此外，还在项上方添加了控件，以便用户清除或选择所有项。
配置单项选择
默认情况下，小组件支持单项选择。选定项将以背景颜色突出显示。
要在使用单项选择模式时启用单选按钮选择，请将 RadioButtonSelection 属性设置为 True。该按钮显示在列表左侧。列表项以单选按钮组形式显示，用户可通过该组获知其每次只能选择一个项。
添加筛选器
可通过将小组件 Filter 属性设置为 true 为列表添加筛选器。筛选器显示于列表顶部，可用于快速筛选列表中的项。
清除项选择
可添加一个空项，以便用户能够通过将小组件 ClearSelection 属性设置为 true 来清除单项选择列表中的选择。还可使用 ClearSelectionLable 属性更改空项的标签。
| | 启用多项选择模式时，此属性不可用。 |
应用状态格式
可使用 State Formatting 根据字符串或数字值来突出显示列表项的当前状况。有关详细信息，请参阅示例：将状态格式应用于列表小组件 (ptc.com)。
小组件属性
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定 (Y/N) | 是否可本地化 (Y/N) | ||
|---|---|---|---|---|---|---|---|
Label | 以小组件标签形式显示的文本。 | STRING | 列表 | Y | Y | ||
LabelAligment | “左”、“右”或“居中”对齐标签。 | STRING | 左 | Y | N | ||
Aligment | 将列表中的项左对齐、右对齐或中心对齐。 | STRING | 左 | Y | N | ||
ClearselectionItem | 将空白选择项添加到列表中。使用户能够清除选择。 | BOOLEAN | True | Y | N | ||
ClearselectionLabel | 为列表中的清除选择项指定自定义文本。默认情况下，将其设置为“无”。 | STRING | 无 | Y | Y | ||
MultiSelect | 使用户能够选择列表中的多个项。 | BOOLEAN | False | N | N | ||
StateField | 指定用于禁用或启用列表中项的信息表。 | INFOTABLE | 不适用 | N | N | ||
Disabled | 禁用混搭中的小组件。小组件会显示在混搭中，但无法单击。 | BOOLEAN | False | Y | N | ||
ShowListFilter | 在列表内添加筛选器，以在运行时筛选列表项。 | BOOLEAN | False | N | N | ||
FilterHintText | 显示列表筛选器的提示文本。 | STRING | 不适用 | N | Y | ||
AutoSelectFirstRow | 将第一行设置为列表中的选定选项。
| BOOLEAN | 不适用 | N | N | ||
RadioButtonSelection | 使用单选模式时在列表项旁边显示单选按钮。 | BOOLEAN | False | N | N | ||
RowHeight | 为单行设置行高。 | NUMBER | 34 | Y | N | ||
CustomClass | 定义 CSS 以应用于小组件顶层 Div。可以输入多个类，以空格作为分隔符。 | STRING | 不可用 | Y | N | ||
TabSequence | 用户按下 Tab 键后，小组件将按该序列突出显示。 | NUMBER | 不可用 | N | N | ||
Data | 小组件数据的信息表或数据源。 | INFOTABLE | 不可用 | Y | N | ||
DisplayField | 表示数据值的信息表字段。 | 不适用 | 不适用 | N | N | ||
ValueField | 用于 SelectedText 的字段。 | 不适用 | 不适用 | N | N | ||
SelectedText | 用于选择列表中的项。 | STRING | 不可用 | Y | Y | ||
SelectedItems | 用于定义列表中选定项的信息表数据源。 | INFOTABLE | 不可用 | Y | N | ||
DoubleClicked | 双击此小组件时，将触发事件。 | 不适用 | 不适用 | Y | N | ||
ListFormat | 此属性用于应用数据的特定呈现。 此属性支持以下呈现格式：NUMBER、XML、BOOLEAN、STRING、IMAGE、TAGS、IMAGELINK、HYPERLINK、THINGCODE、HTML、VEC4、VEC3、THINGNAME、MASHUPS、USERNAME、INFOTABLE、THINGTEMPLATENAME、PASSWORD、JSON、INTEGER、DATETIME、VALUES、LONG、LOCATION、VEC2 和 THINGSHAPENAME。 | 不适用 | 不适用 | 不适用 | 不适用 |
验证列表小组件数据
可通过验证属性验证运行时的列表项选择操作是否符合要求。例如，可要求在列表中选择一项，若未进行任何选择，则显示一条错误消息。
有关验证属性的详细信息，请参阅将验证应用于小组件。
下表列出了 ThingWorx 9.3.4 或更高版本中“验证”面板上提供的验证属性。
属性 | 说明 | 基本类型 | 默认值 | 是否可绑定 (Y/N) | 是否可本地化 (Y/N) |
|---|---|---|---|---|---|
CriteriaMessage | 有关验证条件以及验证失败时显示的消息。 | STRING | 不适用 | Y | Y |
CriteriaMessageDetails | 针对验证条件和失败消息显示的详细信息。 | STRING | 不适用 | Y | Y |
RequiredMessage | 必需值设置为 true 且未选择任何项时显示的消息 | STRING | 选择内容为必需 | Y | Y |
ShowValidationCriteria | 编辑列表时显示有关所需输入的提示消息 | BOOLEAN | False | Y | N |
ShowValidationFailure | 当输入的值验证失败时，显示失败消息 | BOOLEAN | False | Y | N |
ShowValidationSuccess | 当输入的值验证成功时，显示成功消息 | BOOLEAN | False | Y | N |
SuccessMessage | 验证成功时显示的消息 | STRING | 不适用 | Y | Y |
SuccessMessageDetails | 二级消息，显示关于验证成功消息的更多信息 | STRING | 不适用 | Y | Y |
Validate | 更改小组件值时触发的可绑定事件。将此事件绑定至服务或函数以应用验证模式或表达式。 | 事件 | 不适用 | Y | N |
ValidationCriteriaIcon | 针对关于验证条件的提示消息，选择在其中显示的 SVG 图标 | IMAGELINK | info | N | N |
ValidationFailureIcon | 设置验证失败时显示在状况消息中的 SVG 图标。 | IMAGELINK | error | N | N |
ValidationOutput | 检索小组件验证的输出。返回值为 Undefined、Valid、Unvalidated 或 Invalid。 | STRING | 不适用 | Y | N |
ValidationState | 用于设置验证状态的可绑定属性。可将此属性设置为 Undefined、Unvalidated、Valid 或 Invalid。 | STRING | Undefined | Y | N |
ValidationSuccessIcon | 选择验证成功时显示在状态消息中的 SVG 图标 | IMAGELINK | success | N | N |
ValueRequired | 要求选定列表中的一项 | BOOLEAN | False | Y | N |