multiValuePicker 多值选择器

multiValuePicker 可以处理任意类型值的列表。由一个文本框和一组由操作定义的按钮组成。

XML 元素

multiValuePicker

Java 类

JmixMultiValuePicker

基本用法

在线示例

multiValuePicker 可以通过操作编辑列表值，而不是在文本字段内输入进行编辑。

multiValuePicker 的基本用法示例：

<multiValuePicker id="stringsValuePicker" label="Strings">
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="javaClass" value="java.lang.String"/>
            </properties>
        </action>
        <action id="value_clear" type="value_clear"/>
    </actions>
</multiValuePicker>
<multiValuePicker id="integersValuePicker" label="Integers">
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="javaClass" value="java.lang.Integer"/>
            </properties>
        </action>
        <action id="value_clear" type="value_clear"/>
    </actions>
</multiValuePicker>

当用户点击选择按钮时，会展示 Select Value（选择值） 视图。用户可以在这个视图中新建或删除值。需要添加值时，可以点击 Add（添加） 按钮或按下 Enter 添加值。

Select Value 视图可以自定义。该自定义视图需要实现 MultiValueSelectView 接口，然后通过操作的 viewClass 或 viewId 属性设置该视图。

操作

可以给 multiValuePicker 添加自定义或预定义的操作，操作作为按钮显示在右侧。有两种方式：

  • XML 中用内部的 actions 元素定义操作。

  • 控制器 中使用 addAction() 方法编程式添加。

如需在 Jmix Studio 中添加 action，可以在视图 XML 或者 Jmix UI 结构面板中选择组件，然后点击组件面板的 Add 按钮。

预定义操作

框架为 multiValuePicker 提供了两种预定义操作：value_clear 和 multi_value_select。

multi_value_select 操作使用一个值选择视图为 multiValuePicker 设置值。这个视图会根据提供的数据类型生成一个特定的组件用于选择或创建值。multi_value_select 操作可用来选择各种类型的值，包括：

  • Java 类型，例如，String、Integer、Long、Double、BigDecimal，日期和时间类型以及 UUID

  • 枚举 值

  • 实体 实例

使用 javaClass 属性指定一个 Java 数据类型。例如，前面的示例 使用了 java.lang.String。

枚举值

在线示例

用 enumClass 属性设置选择值的枚举类型。

<multiValuePicker id="multiValuePicker">
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="enumClass" value="io.jmix.uisamples.entity.CustomerGrade"/>
            </properties>
        </action>
        <action id="clear" type="value_clear"/>
    </actions>
</multiValuePicker>

处理枚举类型的值时，Select Value（选择值） 视图会生成 comboBox，提供选择枚举值的下拉列表。

实体值

在线示例

用 entityName 属性设置选择值的实体名称。

<multiValuePicker>
    <actions>
        <action id="select" type="multi_value_select">
            <properties>
                <property name="entityName" value="Customer"/>
            </properties>
        </action>
        <action id="clear" type="value_clear"/>
    </actions>
</multiValuePicker>

useComboBox 属性指定在值选择视图中是否用 entityComboBox。默认为 false。

自定义操作

multiValuePicker 的自定义操作与 valuePicker 的 自定义操作 类似。

验证

如需检查 multiValuePicker 组件输入的值，可以通过内部元素 validators 使用 validator。

下面是 multiValuePicker 可以使用的预定义验证器：

XML 元素

validators

预定义验证器

custom - decimalMax - decimalMin - digits - doubleMax - doubleMin - email - max - min - negative - negativeOrZero - notBlank - notEmpty - notNull - positive - positiveOrZero - regexp - 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 属性

下面是 multiValuePicker 的特殊属性：

名称 描述 默认值

allowCustomValue

是否允许用户输入选项中没有的值。

—

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

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

事件和处理器

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

名称 描述

CustomValueSetEvent

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

formatter

将组件的值转成特定的格式。

validator

验证组件的值。

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

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - statusChangeHandler

XML 内部元素

一个 multiValuePicker 可以包含 actions、formatter、prefix、suffix、tooltip 和 validator 作为其内部元素。