listBox 列表选择器

在线示例

listBox 支持用户从可滚动的列表选择单一值。

XML 元素

listBox

Java 类

JmixListBox

XML 属性

id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - height - itemsContainer - itemsEnum - maxHeight - maxWidth - minHeight - minWidth - readOnly - visible - width

事件和处理器

AttachEvent - ComponentValueChangeEvent - DetachEvent - itemEnabledProvider - itemsLabelGenerator - renderer

XML 内部元素

tooltip

基本用法

listbox 支持使用枚举或实体集合作为选项列表。

用 itemsEnum 属性直接指定枚举类的名称：

<listBox itemsEnum="com.company.onboarding.entity.OnboardingStatus"/>

如果是实体集合，则可以先定义一个集合数据容器，然后设置 itemsContainer 属性：

<data>
    <collection class="com.company.onboarding.entity.City" id="citiesDc"> (1)
        <fetchPlan extends="_base"/>
        <loader id="citiesDl">
            <query>
                <![CDATA[select e from City e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <listBox itemsContainer="citiesDc"/> (2)
</layout>
1 City 实体的 CollectionContainer。
2 设置 citiesDc 作为组件的选项容器。
list box basics

禁用条目

在线示例

itemEnabledProvider 会在 listBox 的每个条目生效，以确定该条目是启用（true）还是禁用（false）。已禁用的条目显示为灰色，用户无法选择。默认情况下，所有条目均处于启用状态。

假设 listBox 显示一个用户列表。如果希望显示入职步骤状态为 "Completed" 的用户为启用，而禁用 "In progress" 或 "Not started" 状态的用户。

@Install(to = "listBox", subject = "itemEnabledProvider")
private boolean listBoxItemEnabledProvider(final User user) {
    if (user == null) {
        return true;
    }
    return user.getOnboardingStatus() == OnboardingStatus.COMPLETED;

}

示例中，itemEnabledProvider 检查每个用户的状态。只有 OnboardingStatus.COMPLETED 状态的用户会在 listBox 中显示为启用。

条目渲染

在线示例

框架支持为条目自定义渲染内容。可以使用 setRenderer() 方法或 @Supply 注解实现。

<listBox id="listBox" itemsContainer="usersDc"/>
@Autowired
private UiComponents uiComponents;
@Autowired
private FileStorage fileStorage;

@Supply(to = "listBox", subject = "renderer")
private ComponentRenderer<HorizontalLayout, User> listBoxRenderer() {
    return new ComponentRenderer<>(user -> {
        FileRef fileRef = user.getPicture();
        HorizontalLayout row = uiComponents.create(HorizontalLayout.class);
        row.setAlignItems(FlexComponent.Alignment.END);
        if (fileRef != null) {
            Image image = uiComponents.create(Image.class);
            image.setWidth("30px");
            image.setHeight("30px");
            image.setClassName("user-picture");
            StreamResource streamResource = new StreamResource(
                    fileRef.getFileName(),
                    () -> fileStorage.openStream(fileRef));
            image.setSrc(streamResource);
            row.add(image);
        }
        row.add(new Span(user.getFirstName() + ", " + user.getLastName()));
        return row;
    });
}

参考

Vaadin 文档