3.5.2.1.49. 标签列表

在线示例

API 文档

TokenList 组件提供了一种使用列表的简单方式: 以水平或垂直的方式标签名称、使用下拉列表添加标签、使用每个标签旁边的按钮进行移除。

gui tokenList

组件 XML 名称: tokenList

下面是一个界面 XML 描述中定义 TokenList 组件的示例:

  1. <data>
  2.     <instance id="orderDc" class="com.company.sales.entity.Order" view="order-edit">
  3.         <loader/>
  4.         <collection id="productsDc" property="products"/>
  5.     </instance>
  6.     <collection id="allProductsDc" class="com.company.sales.entity.Product" view="_minimal">
  7.         <loader id="allProductsDl">
  8.             <query><![CDATA[select e from sales_Product e order by e.name]]></query>
  9.         </loader>
  10.     </collection>
  11. </data>
  12. <layout>
  13.     <tokenList id="productsList" dataContainer="orderDc" property="products" inline="true" width="500px">
  14.         <lookup optionsContainer="allProductsDc"/>
  15.     </tokenList>
  16. </layout>

在上面的示例中，嵌套的 productsDc 数据容器包含了一个订单的产品集合，同时 allProductsDc 数据容器包含了数据库中所有可用产品。id 为 productsList 的 TokenList 组件展示 productsDc 数据容器的内容，同时可以通过从 allProductsDc 中添加实例来改变集合。

tokenList 属性：

  • position – 设置下拉列表的位置。这个属性的可选值包括: TOP、BOTTOM。默认是：TOP。

gui tokenListBottom

  • inline 属性定义包含选中条目的列表如何显示：vertically（垂直） 或 horizontally（水平）。true 表示水平对齐，false – 垂直对齐。 水平对齐的示例:

gui tokenListInline

  • simple – 设置为 true 时，将隐藏选择组件同时显示 Add 按钮。点击 Add 按钮将弹出一个选择界面，界面上有实体实例列表，其类型由数据容器定义。选择界面的标识符是根据 PickerField 的标准查找操作的规则来确定的。单击 Clear 按钮将删除 TokenList 组件数据源中的所有元素。

    gui tokenListSimple withClear

  • clearEnabled - 当设置为 false， Clear 按钮将隐藏。

tokenList 元素:

  • lookup − 值选择组件的描述。

    lookup 元素属性:

    • lookup 属性使 TokenList 组件可以使用一个实体查找界面来选择值。

      gui tokenListLookup

  1. -   `inputPrompt` - 显示在查找字段中的文本提示信息。如果没有设置，查找字段将不显示任何提示内容。
  3.     ```
  4.     <tokenList id="linesList" dataContainer="orderItemsDс" property="items" width="320px">
  5.         <lookup optionsDatasource="allItemsDs" inputPrompt="Choose an item"/>
  6.     </tokenList>
  7.     ```
  9.     ![gui TokenList inputPrompt](/projects/cuba-7.2-zh/d5a7f635699280c968fd481daad9be44.png)
  12. -   `lookupScreen` 属性在 `lookup="true"` 时设置用于选择值的界面的标识符。如果没有设置此属性，则根据 `com.haulmont.cuba.gui.actions.picker.LookupAction` [标准操作]($9ddcd45200b87795.md)的规则选择界面标识符。
  14. -   `openType` 属性定义查找界面的打开方式，与 `com.haulmont.cuba.gui.actions.picker.LookupAction` [标准操作]($9ddcd45200b87795.md)的描述相似。默认值 – `THIS_TAB`。
  17. -   `multiselect` - 如果这个属性设置为 `true`, `true` 将传递到查找界面的参数字典的 `MULTI_SELECT` 键。这个标志用于设置界面为多选模式。这个标志定义在 `WindowParams` 枚举中，因此在[旧版本的界面]($5ea4e44f7e1a232d.md)中可以通过以下方式使用：
  19.     ```
  20.     @Override
  21.     public void init(Map<String, Object> params) {
  22.         if (WindowParams.MULTI_SELECT.getBool(getContext())) {
  23.             usersTable.setMultiSelect(true);
  24.         }
  25.     }
  26.     ```
  • addButton – 对添加条目的按钮的描述。可包含 caption 和 icon 属性。

tokenList 监听器:

  • ItemClickListener 允许跟踪 tokenList 列表条目上的点击操作。

  • ValueChangeListener 可以跟踪 tokenList 组件值的变化，像其它任何实现了 Field 接口的组件一样。可以使用 isUserOriginated() 方法来跟踪 ValueChangeEvent 的来源。

tokenList 的属性

align - caption - captionAsHtml - captionProperty - clearEnabled - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - description - descriptionAsHtml - editable - enable - box.expandRatio - height - icon - id - inline - position - simple - stylename - tabIndex - visible - width

tokenList 的元素

addButton - lookup

lookup 的属性

captionProperty - filterMode - inputPrompt - lookup - lookupScreen - multiselect - openType - optionsDatasource

button 的属性

caption - icon

API

addValueChangeListener - setContextHelpIconClickHandler - setItemClickListener - setOptionCaptionProvider