3.5.2.1.49. 树

Tree 组件用于将具有自引用关系的实体显示为树状层次结构。

gui 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,用户可在按住 CtrlShift 键的情况下使用键盘或鼠标选择多个节点。多选模式默认关闭。

  • selectionMode - 设置行选择模式。有三种预定义的选择模式:

    • SINGLE - 单一记录选择模式。

    • MULTI - 多选模式,跟在表格中多选类似。

    • NONE - 禁止选择。

    行选择事件可以通过 SelectionListener 监听器进行跟踪。选择事件的发起者可以通过isUserOriginated()方法跟踪。

    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 属性,此属性定义了实体属性的名称,这个属性也指向相同的实体。