DOC-03-15 树表视图(Tree Table View)

本章描述了TreeTableView控件,用于按列展现具有无限层级结构的数据。

TreeTableView控件与TreeView和TableView控件有很多类似之处,并且在各个方面扩展了它们的功能。

15–1 TreeTableView 组件样例

3-15-1 tree-table-view-sample

创建一个TreeTableView 控件

在你的程序中实现一个基本的TreeTableView组件可以按如下步骤进行:

1. 创建树节点

2. 创建根元素

3. 添加树节点到根元素下

4. 创建一个或多个列

5. 定义单元格内容

6. 创建一个树表视图

7. 向树表视图分配列

在一些情况下,你可以省略或隐藏根元素。在下面的例子中按上述步骤创建了一个简单的树表视图控件。

15–1 只有一列的TreeTableView

表列的Cell Factory为每个树节点定义了将要放到此列中的内容。

当你编译并运行上面的样例时,它将会产生如下效果:

15–2简单的TreeTableView组件

3-15-2 tree-table-view-simple

在上面的例子中在一列里创建了一个简单的树视图组件,然而在你的应用程序中经常会操作进行了更多扩展的数据集。在下面的章节张将会展示如何展现上面Tree View章节例子中提到的营销部门雇员数据中的个人信息。

增加更多列

下面扩展了Tree View章节中的例子并且为每个营销部门的雇员信息提供了更多的信息。下面的例子展现了如何增加更多的列。

15–2 创建带有两列的TreeTableView

在上面的例子中,你可以修改Employee类中的数据结构并且定义两个与雇员的姓名和电子邮件地址对应的属性。TreeTableView组件提供了两列来分别展现它们。

查看下面的代码片段。它为两个表列创建了Cell Factory。setCellValueFactory方法为每个表列定义了TreeItem的内容,因此Employee列包含了Employee.name属性值,而Email列包含了Employee.email属性值。

15–3 EmployeeEmail列实现单元格工厂和

当你编译并运行上面的样例时,它将会产生如图15-3的效果。

15-3 带有EmployeeEmail列的TreeTableView组件

3-15-3 tree-table-view-columns

树表的默认样式将会强制展开所有的树节点和所有的表列。然而,你可以通过使用TreeTableView和TreeTableColumn类对应的方法或属性来改变这些默认值。

改变视觉样式

你可以启用展示菜单按钮,这样用户可以定义表列的可见性。调用treeTableView对象的treeTableView.setTableMenuButtonVisible(true)方法,此方法将会在表头上填加一个“+”按钮。下图展现了用户操作隐藏Employee列的瞬间截图:

15–4带有表格菜单的 TreeTableView

3-15-4 tree-table-view-button

你可以通过调用TreeTableView类的setShowRoot(…)方法来控制根节点是否可见,例如:treeTableView.setShowRoot(false);。图15-5是调用时传入参数值为false后隐藏了根节点后效果:

15–5 隐藏了根节点的TreeTableView 控件

3-15-5 tree-table-view-no-root

你可以通过点击列头来对列中的数据排序,并可以切换排序模式为升序或降序。除了内置的对排序的支持,还可以参考下面的样例代码通过设置TreeTableColumn和TreeTableView的属性来控制数据排序。

15–4 排序模式设置

管理选择模式

TreeTableView类中默认实现的选择模式是在MultipleSelectionModel抽象类中定义的,它设置默认值为SelectionMode.SINGLE。使用setSelectionModel和setCellSelectionEnabled方法可以启用对树节点和单元格的多选功能。参考下面的表格来了解更多的可选值及其结果。

15-1 选择模式设置

setSelectionModel

setCellSelectionEnabled

Behavior

SelectionMode.SINGLE

false

可对表格中的一行单选

SelectionMode.SINGLE

true

可对表格中的单个单元格进行单选

SelectionMode.MULTUPLE

false

可对表格中的多行进行选择

SelectionMode.MULTUPLE

true

可对多行中的多个单元格进行多选

例如,你可以使用下面的代码来允许TreeTableView组件在多行中对多个单元格进行选择。

15–5 为单元格启用多选模式

下图展现了在TableViewSample样例程序中添加了上例代码后,你对多行进行选择的效果:

15–6对表格单元格的多选操作

3-15-6 tree-table-view-row

由于TreeTableView控件封装了TableView和TreeView的所有功能,你可能需要从TableView和TreeView对应的章节中获取更多信息。

相关的文档

    · TreeView

    · TreeItem

    · TreeCell

    · Cell

    · TableView

    · TableColumn

    · TreeTableView

    · TreeTableColumn

    · TreeTableRow

    · TreeTableCell

    · Customization of UI Controls

 

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_treetableview/
百度已收录