twinColumn 双列
一个直观的组件,通过在两列之间移动条目从列表或集合中进行选择。
-
XML 元素:
twinColumn
-
Java 类:
TwinColumn
快速开始
在 XML 中使用 twinColumn
创建双列组件,设置 itemsContainer
属性为一个 集合容器。容器内的条目将展示在列中。
下面的示例展示双列的基本用法:
<data>
<collection id="usersDc" class="com.company.onboarding.entity.User">
<loader id="usersDl" readOnly="true">
<query>
<![CDATA[select e from User e]]>
</query>
</loader>
<fetchPlan extends="_base"/>
</collection>
</data>
<facets>
<dataLoadCoordinator auto="true"/> (1)
</facets>
<layout>
<twinColumn itemsContainer="usersDc"/>
</layout>
1 | 通过 dataLoadCoordinator facet 自动加载数据。 |
多选
twinColumn
组件默认是多选模式,用户可以选择并移动多个条目。还可以支持移动所有条目,需要设置 selectAllButtonsVisible
属性:
<twinColumn itemsContainer="usersDc" selectAllButtonsVisible="true"/>
![twin column select all buttons](../../_images/visual-components/components/twin-column-select-all-buttons.png)
列标签
如需设置列标签,请使用 itemsColumnLabel
和 selectedItemsColumnLabel
属性:
<twinColumn itemsContainer="usersDc" itemsColumnLabel="Users" selectedItemsColumnLabel="Moderators"/>
![twin column labels](../../_images/visual-components/components/twin-column-labels.png)
条目顺序
默认情况下,条目在移动之后不会保留原来的顺序。条目每次移到另一列时,会自动添加到列的底部。可以通过设置 reorderable = "true"
属性保留原始顺序。
<twinColumn itemsContainer="usersDc" reorderable="true"/>
样式版本
通过 themeNames 属性调整组件的外观,支持 4 个不同的选项:
checkboxes
用对钩表示选择的条目,而非修改背景色。
![twin column checkboxes](../../_images/visual-components/components/twin-column-checkboxes.png)
no-border
不显示组件的边框。
![twin column no border](../../_images/visual-components/components/twin-column-no-border.png)
no-row-border
不显示行分隔符。
![twin column no row border](../../_images/visual-components/components/twin-column-no-row-border.png)
no-space-between-actions
不显示操作按钮之间的空隙。
![twin column no space between actions](../../_images/visual-components/components/twin-column-no-space-between-actions.png)
可以组合多个主题名,通过逗号分隔。 |
XML 属性
id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - dataContainer - enabled - height - helperText - itemsColumnLabel - itemsContainer - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - reorderable - required - requiredMessage - selectAllButtonsVisible - selectedItemsColumnLabel - themeNames - visible - width