multiSelectComboBoxPicker 多选下拉框选择器

multiSelectComboBoxPicker 支持用户从下拉列表或通过选取操作选择多个条目。

XML 元素

multiSelectComboBoxPicker

Java 类

JmixMultiSelectComboBoxPicker

基本用法

在线示例

当用户使用指针设备点击该控件时，会打开下拉列表。在控件获得焦点时，使用键盘的 ↑ 和 ↓ 键或输入字符也会打开下拉列表。

multiSelectComboBoxPicker 控件中可以定义任意数量的操作，在组件右侧显示为按钮。操作可以通过 XML 中的 actions 内部元素定义，也可以在控制器中使用 addAction() 以编程方式添加。

<multiSelectComboBoxPicker placeholder="Choose a customers" itemsContainer="customersDc"
                           metaClass="Customer"
                           width="20em">
    <actions>
        <action id="entity_lookup" type="entity_lookup"/>
        <action id="entity_clear" type="entity_clear"/>
    </actions>
</multiSelectComboBoxPicker>

数据感知的 multiSelectComboBoxPicker

数据绑定是指将组件与 数据容器 进行关联。可视化组件或相应数据容器中的更改可以触发彼此的更新。有关详细信息，请参阅 使用数据组件。

与 multiSelectComboBox 类似，multiSelectComboBoxPicker 专为存储多个值的属性而设计，例如 List 或 Set。有关常见数据结构和用例，请参见 数据绑定。

要创建连接数据的 multiSelectComboBoxPicker，请使用 dataContainer 和 property 属性。itemsContainer 属性用于提供可用项列表。以下示例生成一个数据感知的 multiSelectComboBoxPicker。

<data>
    <instance id="userDc" class="com.company.onboarding.entity.User"> (1)
        <fetchPlan extends="_base"> (2)
            <property name="hobbies" fetchPlan="_base"/>
        </fetchPlan>
        <loader id="userDl"/>
    </instance>
    <collection id="hobbiesDc" class="com.company.onboarding.entity.Hobby"> (3)
        <loader id="hobbiesDl" readOnly="true">
            <query>
                <![CDATA[select e from Hobby e]]>
            </query>
        </loader>
        <fetchPlan extends="_base"/>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/> (4)
</facets>
<layout>
    <multiSelectComboBoxPicker id="hobbiesPicker"
                               dataContainer="userDc"
                               property="hobbies"
                               itemsContainer="hobbiesDc"> (5)
        <actions>
            <action id="entityClear" type="entity_clear"/> (6)
            <action id="entityLookup" type="entity_lookup"/> (7)
        </actions>
    </multiSelectComboBoxPicker>
</layout>
1 数据容器中包含当前编辑的 User 实例。
2 扩展了 Fetch plan，获取 Hobby 实例的列表，可用于选择。
3 Hobby 实体的 CollectionContainer。
4 数据加载协调器自动为组件提供可供选择的实例。
5 multiSelectComboBoxPicker 使用 hobbiesDc 作为选项容器显示 hobby 的列表。
6 添加预定义的操作清除所选内容。
7 添加预定义的操作打开查找视图。

组件的值包含所选的条目。当组件绑定集合属性时，Jmix 会将选定的条目转换为属性集合类型，例如 List 或 Set。

使用 MetaClass

在线示例

multiSelectComboBoxPicker 也可以不与数据关联使用，即，不需要设置 dataContainer 或 property 属性。此时，可以使用 metaClass 属性指定 multiSelectComboBoxPicker 的实体类。itemsContainer 属性用于创建控件中的选项列表。

例如，组件可以直接处理 Hobby，那么需要设置 metaClass 为 Hobby：

<multiSelectComboBoxPicker placeholder="Choose a customers" itemsContainer="customersDc"
                           metaClass="Customer"
                           width="20em">
    <actions>
        <action id="entity_lookup" type="entity_lookup"/>
        <action id="entity_clear" type="entity_clear"/>
    </actions>
</multiSelectComboBoxPicker>

基本功能

支持 comboBox 或 multiSelectComboBox 组件的常用功能：

验证

如需检查 multiSelectComboBoxPicker 组件输入的值，可以在内部元素 validators 中添加一个 validator元素。

multiSelectComboBoxPicker 可以使用下列预定义的验证器：

XML 元素

validators

预定义验证器

custom - notEmpty - notNull - size

样式版本

使用 themeNames 属性配置一个或多个样式。

样式 描述 支持的主题

align-left

字段值左对齐。

Aura, Lumo

align-center

字段值居中对齐。

Aura, Lumo

align-right

字段值右对齐。

Aura, Lumo

align-start

根据当前文本方向，将字段值向起始侧对齐。

Aura

align-end

根据当前文本方向，将字段值向末尾侧对齐。

Aura

helper-above-field

帮助文字显示在字段上方，标题下方。

Aura, Lumo

small

组件更小。

Aura, Lumo

XML 属性

下面是 multiSelectComboBoxPicker 的特殊属性：

名称 描述 默认值

allowCustomValue

用户是否可以输入选项中没有的值。

—

autoExpand

当组件获得焦点时，所选的值是否自动展开。

—

autoOpen

当组件获得焦点时，选项列表是否自动展开。

—

clearButtonVisible

组件是否显示一个清除按钮。

false

itemsContainer

设置选项的数据容器。

—

itemsEnum

设置选项的枚举。

—

metaClass

为组件设置一个实体类。

—

opened

设置下拉列表是否展开。

—

pageSize

设置每页的数量。

—

selectedItemsOnTop

将已选的条目放在顶部。

—

下面是 multiSelectComboBoxPicker 支持的其他通用属性：

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredMessage - tabIndex - themeNames - title - visible - width

事件和处理器

下面是 multiSelectComboBoxPicker 的特殊事件和处理器：

名称 描述

CustomValueSetEvent

当用户输入自定义内容时触发。

itemLabelGenerator

为每个选项提供自定义的显示文本。

itemsFetchCallback

按过滤条件和分页加载选项。

renderer

为每个选项提供自定义的显示组件。

validator

验证组件值。

下面是 multiSelectComboBoxPicker 支持的其他通用事件：

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - TypedValueChangeEvent

XML 内部元素

一个 multiSelectComboBoxPicker 可以包含 actions、fragmentRenderer、itemsQuery、tooltip 和 validators 作为其内部元素。