TwinColumn 双列选择

在线示例

TwinColumn - 双列 组件是由两个并排的列表组成的多选组件。左边的列表包含可选的值列表，右边的列表是已选的值列表。用户可以通过双击或按钮将值从左侧转移到右侧或者逆向操作进行多选。

twin column

组件的 XML 名称：twinColumn。

基本用法

下面是一个使用 TwinColumn 组件选择实体实例的例子。如需设置选项列表，使用 optionsContainer 属性，设置为包含实体集合的容器 id。

@JmixEntity
@Table(name = "UIEX1_EMPLOYEE")
@Entity(name = "uiex1_Employee")
public class Employee {
    @InstanceName
    @Column(name = "NAME")
    private String name;

    @JmixGeneratedValue
    @Column(name = "ID", nullable = false)
    @Id
    private UUID id;
}
<data>
    <collection id="employeesDc"
                class="ui.ex1.entity.Employee">
        <fetchPlan extends="_local"/>
        <loader id="employeesDl">
            <query>
                <![CDATA[select e from uiex1_Employee e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <twinColumn id="twinColumn"
                addAllBtnEnabled="true"
                optionsContainer="employeesDc"/>
</layout>

上面的例子中，该组件展示 Employee 中用 @InstanceName 注解的字段。组件值是选择的实体列表。

例如，我们定义一个按钮用来展示选中实体的名称：

<button id="button" caption="Show value"/>
@Autowired
private TwinColumn<Employee> twinColumn;
@Autowired
private Notifications notifications;
@Autowired
private MetadataTools metadataTools;

@Subscribe("button")
protected void onButtonClick(Button.ClickEvent event) {
    StringBuilder sb = new StringBuilder();
    Collection<Employee> employees = twinColumn.getValue();
    if (employees != null) {
        notifications.create()
                .withCaption(
                        employees.stream()
                                .map(employee -> metadataTools.getInstanceName(employee))
                                .collect(Collectors.joining("\n"))
                )
                .show();

    }
}

选项

如需设置选项列表，可以用一种 Options 接口的实现。参阅 CheckBoxGroup 复选框组 的 编程式设置选项 章节了解详情。

属性

  1. addAllBtnEnabled 属性可以展示在两个列表间移动全部选项的按钮。可以设置下列值：

    • true

    • false - 默认值。

  2. leftColumnCaption 和 rightColumnCaption 属性可以设置两个列表的标题。

  3. rows 属性可以设置每个列表显示的行数。但是 height 属性优先级高于 rows 属性。

事件和处理器

如需使用 Jmix Studio 生成处理器的桩代码，需要在界面 XML 描述或者 Jmix UI 层级结构面板选中该组件，然后用 Jmix UI 组件面板的 Handlers 标签页生成。

或者可以使用界面控制器顶部面板的 Generate Handler 按钮。

ContextHelpIconClickEvent

参阅 ContextHelpIconClickEvent。

ValueChangeEvent

参阅 ValueChangeEvent。

OptionCaptionProvider

参阅 OptionCaptionProvider。

OptionStyleProvider

参阅 OptionStyleProvider。

Validator

参阅 Validator。

TwinColumn XML 属性

可以使用 Studio 界面设计器的 Jmix UI 组件面板查看和编辑组件的属性。

addAllBtnEnabled - align - box.expandRatio - caption - captionAsHtml - captionProperty - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - description - descriptionAsHtml - editable - enable - height - htmlSanitizerEnabled - icon - id - leftColumnCaption - optionsContainer - property - required - requiredMessage - responsive - rightColumnCaption - rows - rowspan - stylename - tabIndex - visible - width

TwinColumn XML 元素

validators