在javafx中,树视图是treeView,表格是tableview,但是有时候就会使用到树视图显示的表格,这时候就要使用TreeTableView,

树表结构和树视图很像,在在子类添加上和tableView有很类似,

创建一个TreeTableView 控件

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

1. 创建树节点

2. 创建根元素

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

4. 创建一个或多个列

5. 定义单元格内容

6. 创建一个树表视图

7. 向树表视图分配列

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

import javafx.application.Application;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableColumn.CellDataFeatures;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableView;
import javafx.stage.Stage;
 
public class TreeTableViewSample extends Application {
 
    public static void main(String[] args) {
        Application.launch(args);
    }
    
    @Override
    public void start(Stage stage) {
        stage.setTitle("Tree Table View Samples");
        final Scene scene = new Scene(new Group(), 200, 400);
        Group sceneRoot = (Group)scene.getRoot();  
      
        //Creating tree items
        final TreeItem<String> childNode1 = new TreeItem<>("Child Node 1");
        final TreeItem<String> childNode2 = new TreeItem<>("Child Node 2");
        final TreeItem<String> childNode3 = new TreeItem<>("Child Node 3");
        
        //Creating the root element
        final TreeItem<String> root = new TreeItem<>("Root node");
        root.setExpanded(true);   
     
        //Adding tree items to the root
        root.getChildren().setAll(childNode1, childNode2, childNode3);        

        //Creating a column
        TreeTableColumn<String,String> column = new TreeTableColumn<>("Column");
        column.setPrefWidth(150);   
     
        //Defining cell content
        column.setCellValueFactory((CellDataFeatures<String, String> p) -> 
            new ReadOnlyStringWrapper(p.getValue().getValue()));  

        //Creating a tree table view
        final TreeTableView<String> treeTableView = new TreeTableView<>(root);
        treeTableView.getColumns().add(column);
        treeTableView.setPrefWidth(152);
        treeTableView.setShowRoot(true);             
        sceneRoot.getChildren().add(treeTableView);
        stage.setScene(scene);
        stage.show();
    }     
}

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

 

增加更多列

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

import java.util.Arrays;
import java.util.List;
import javafx.application.Application;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.beans.property.SimpleStringProperty;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
 
public class TreeTableViewSample extends Application {
 
    List<Employee> employees = Arrays.<Employee>asList(
        new Employee("Ethan Williams", "ethan.williams@example.com"),
        new Employee("Emma Jones", "emma.jones@example.com"),
        new Employee("Michael Brown", "michael.brown@example.com"),
        new Employee("Anna Black", "anna.black@example.com"),
        new Employee("Rodger York", "roger.york@example.com"),
        new Employee("Susan Collins", "susan.collins@example.com"));

    private final ImageView depIcon = new ImageView (
            new Image(getClass().getResourceAsStream("department.png"))
    );

    final TreeItem<Employee> root = 
        new TreeItem<>(new Employee("Sales Department", ""), depIcon);
    public static void main(String[] args) {
        Application.launch(TreeTableViewSample.class, args);
    }

    @Override
    public void start(Stage stage) {
        root.setExpanded(true);
        employees.stream().forEach((employee) -> {
            root.getChildren().add(new TreeItem<>(employee));
        });
        stage.setTitle("Tree Table View Sample");
        final Scene scene = new Scene(new Group(), 400, 400);
        scene.setFill(Color.LIGHTGRAY);
        Group sceneRoot = (Group) scene.getRoot();

        TreeTableColumn<Employee, String> empColumn = 
            new TreeTableColumn<>("Employee");
        empColumn.setPrefWidth(150);
        empColumn.setCellValueFactory(
            (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
            new ReadOnlyStringWrapper(param.getValue().getValue().getName())
        );

        TreeTableColumn<Employee, String> emailColumn = 
            new TreeTableColumn<>("Email");
        emailColumn.setPrefWidth(190);
        emailColumn.setCellValueFactory(
            (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
            new ReadOnlyStringWrapper(param.getValue().getValue().getEmail())
        );

        TreeTableView<Employee> treeTableView = new TreeTableView<>(root);
        treeTableView.getColumns().setAll(empColumn, emailColumn);
        sceneRoot.getChildren().add(treeTableView);
        stage.setScene(scene);
        stage.show();
    }
 
    public class Employee {
 
        private SimpleStringProperty name;
        private SimpleStringProperty email;
        public SimpleStringProperty nameProperty() {
            if (name == null) {
                name = new SimpleStringProperty(this, "name");
            }
            return name;
        }
        public SimpleStringProperty emailProperty() {
            if (email == null) {
                email = new SimpleStringProperty(this, "email");
            }
            return email;
        }
        private Employee(String name, String email) {
             = new SimpleStringProperty(name);
            this.email = new SimpleStringProperty(email);
        }
        public String getName() {
            return name.get();
        }
        public void setName(String fName) {
            name.set(fName);
        }
        public String getEmail() {
            return email.get();
        }
        public void setEmail(String fName) {
            email.set(fName);
        }
    }
}

 

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

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

//Cell factory for the data the Empoyee column
empColumn.setCellValueFactory(
    (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
    new ReadOnlyStringWrapper(param.getValue().getValue().getName())
);
//Cell factory for the data in the Email column
emailColumn.setCellValueFactory(
    (TreeTableColumn.CellDataFeatures<Employee, String> param) -> 
    new ReadOnlyStringWrapper(param.getValue().getValue().getEmail())
);

 

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

 

改变视觉样式

你可以启用展示菜单按钮,这样用户可以定义表列的可见性。调用treeTableView对象的treeTableView.setTableMenuButtonVisible(true)方法,此方法将会在表头上填加一个“+”按钮。

你可以通过调用TreeTableView类的setShowRoot(…)方法来控制根节点是否可见,例如:treeTableView.setShowRoot(false);

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

//Setting the descending mode of sorting for the Email column
emailColumn.setSortType(TreeTableColumn.SortType.DESCENDING);
//Setting the ascending mode of sorting for the Email column
emailColumn.setSortType(TreeTableColumn.SortType.ASCENDING);
//Applying the sorting mode to all tree items
treeTableView.setSortMode(TreeSortMode.ALL_DESCENDANTS);
//Applying the sorting mode only to the first-level nodes
treeTableView.setSortMode(TreeSortMode.ONLY_FIRST_LEVEL);

 

管理选择模式

TreeTableView类中默认实现的选择模式是在MultipleSelectionModel抽象类中定义的,它设置默认值为SelectionMode.SINGLE。使用setSelectionModel和setCellSelectionEnabled方法可以启用对树节点和单元格的多选功能。

 

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

treeTableView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
treeeTableView.getSelectionModel().setCellSelectionEnabled(true);

 

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