3.5.2.1.49. 树
Tree
组件用于将具有自引用关系的实体显示为树状层次结构。
组件的 XML 名称: tree
下面是一个在界面 XML 描述中定义 tree
组件的示例:
<data readOnly="true">
<collection id="departmentsDc" class="com.company.sales.entity.Department" view="department-view">
<loader id="departmentsDl">
<query>
<![CDATA[select e from sales_Department e]]>
</query>
</loader>
</collection>
</data>
<layout>
<tree id="departmentsTree" dataContainer="departmentsDc" hierarchyProperty="parentDept"/>
</layout>
这里,dataContainer 属性包含指向集合数据容器的引用,hierarchyProperty
属性定义了一个实体属性的名称,这个属性也指向同一个的实体(从而能形成树)。
使用 treechildren
元素的 captionProperty
属性指定要显示为树节点名称的实体属性的名称,如果这个属性没有定义,将默认显示实体的实例名称。
使用 setItemCaptionProvider()
方法可以设置一个函数,用来将实体的属性名称作为标题放到数的每项中。
在 Tree
中进行选择:
multiselect
设置是否允许树节点多选。如果multiselect
设置为true
,用户可在按住 Ctrl 或 Shift 键的情况下使用键盘或鼠标选择多个节点。多选模式默认关闭。
selectionMode
- 设置行选择模式。有三种预定义的选择模式:SINGLE
- 单一记录选择模式。MULTI
- 多选模式,跟在表格中多选类似。NONE
- 禁止选择。
行选择事件可以通过 `SelectionListener` 监听器进行跟踪。选择事件的发起者可以通过[isUserOriginated()]($3f07a342c69cd1ae.md#gui_api_UserOriginated)方法跟踪。
`selectionMode` 属性比废弃的 `multiselect` 属性有更高的优先级。
setItemClickAction()
用于定义一个操作,双击树节点时执行。
每个树节点左边可以定义一个图标。在界面控制器中的 setIconProvider()
方法中创建一个 Function
接口的实现来设置图标:
@Inject
private Tree<Department> tree;
@Subscribe
protected void onInit(InitEvent event) {
tree.setIconProvider(department -> {
if (department.getParentDept() == null) {
return "icons/root.png";
}
return "icons/leaf.png";
});
}
对于之前的老界面,Tree
组件可以绑定到一个数据源而不是数据容器。这种情况下,需要定义嵌套的 treechildren
元素,这个元素需要包含指向在 datasource 属性定义的 hierarchicalDatasource
的引用。hierarchicalDatasource
的声明需要包含 hierarchyProperty
属性,此属性定义了实体属性的名称,这个属性也指向相同的实体。
tree 的属性
caption - captionAsHtml - captionProperty - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - description - descriptionAsHtml - enable - box.expandRatio - height - id - multiselect - stylename - tabIndex - visible - width
tree 的元素
treechildren 的属性
API