JavaFX 8 Tree Table

JavaFX 8新增樹狀表格（Tree Table），樹狀表格結合樹與表格物件，因此與後兩者十分類似，特色是將樹狀物件置於表格單元之中，讓表格單元中的資料以階層的方式呈現，下圖為樹狀表格的樣式：

JavaFX的樹狀表格物件由以下類別所組成：

• javafx.scene.control.TreeTableView
• javafx.scene.control.TreeTableColumn
• javafx.scene.control.TreeTableRow
• javafx.scene.control.TreeTableCell
• javafx.scene.control.cell.CheckBoxTreeTableCell
• javafx.scene.control.cell.ChoiceBoxTreeTableCell
• javafx.scene.control.cell.ComboBoxTreeTableCell
• javafx.scene.control.cell.TextFieldTreeTableCell

首先以TreeItem類別建立樹狀物件的根節點，並以setExpanded()方法設定節點的展開狀態：

// 建立根節點
TreeItem<String> treeRoot = new TreeItem<>("Root node");
// 設定節點的展開狀態
treeRoot.setExpanded(true);
...

接著以TreeItem類別建立子節點，並以TreeItem類別的getChildren().add()或getChildren().addAll()方法依序將子節點加入至根節點之中：

// 建立子節點
TreeItem<String> treeItem1 = new TreeItem<>("Profile");
TreeItem<String> treeItem2 = new TreeItem<>("Course");
TreeItem<String> treeItem3 = new TreeItem<>("Publication");
TreeItem<String> treeItem4 = new TreeItem<>("Book");
TreeItem<String> treeItem5 = new TreeItem<>("Project");

// 依序將子節點加入至根節點之中
treeRoot.getChildren().addAll(
  treeItem1, treeItem2, treeItem3, treeItem4, treeItem5);
...

待建立樹狀物件之後，則以TreeTableColumn類別設定直行的相關屬性如直行標題，本範例僅設定一直行：

// 設定直行標題
TreeTableColumn<String,String> treeTableColumn = 
  new TreeTableColumn<>("Vita");

// 設定直行屬性
treeTableColumn.setCellValueFactory(
  (CellDataFeatures<String,String> p) -> 
  new ReadOnlyStringWrapper(p.getValue().getValue()));  
...

最後以TreeTableView類別的getColumns().add()或getColumns().addAll()方法依序將直行加入至樹狀表格之中：

// 建立TreeTableView物件
TreeTableView<String> treeTableView = null;
treeTableView = new TreeTableView<>(treeRoot);

// 依序將直行加入至樹狀表格之中
treeTableView.getColumns().add(treeTableColumn);
// 設定是否顯示根節點
treeTableView.setShowRoot(true); 
// 設定是否可以選擇樹狀表格單元
treeTableView.getSelectionModel().setCellSelectionEnabled(false);
// 設定複選模式
treeTableView.getSelectionModel().setSelectionMode(
  SelectionMode.MULTIPLE);
// 設定直行的調整原則
treeTableView.setColumnResizePolicy(
  TreeTableView.CONSTRAINED_RESIZE_POLICY);
// 設定是否顯示樹狀表格選單按鈕
treeTableView.setTableMenuButtonVisible(true);
...

【執行結果】

除了上述範例的建立方式之外，亦可以陣列的方式處理多直行的樹狀表格單元。首先自定Department類別以建立節點陣列：

// 自定Department類別
public class Department {
  private SimpleStringProperty faculty;
  private SimpleStringProperty position;
  private SimpleStringProperty email;
  private SimpleStringProperty office; 
  private SimpleStringProperty phone;

  public Department(String _faculty, String _position, 
    String _email, String _office, String _phone) {

    this.faculty = new SimpleStringProperty(_faculty);
    this.position = new SimpleStringProperty(_position);
    this.email = new SimpleStringProperty(_email);
    this.office  = new SimpleStringProperty(_office);
    this.phone = new SimpleStringProperty(_phone);
  }

  public SimpleStringProperty facultyProperty() {
    if (faculty == null) {
      faculty = new SimpleStringProperty(this, "faculty");
    }
    return faculty;
  }
  ...

  public String getFaculty() {
    return faculty.get();
  }

  public void setFaculty(String _faculty) {
    faculty.set(_faculty);
  }
  ...
}  
...

以此自定的Department類別建立節點陣列：

// 建立節點陣列
ObservableList<Department> department = 
  FXCollections.observableArrayList(
    new Department("Athena", "Associate Professor", "athena@edu.tw",
      "725", "6400"),
    new Department("Leo", "Associate Professor", "leo@edu.tw",
      "813", "6506"),
    new Department("Teresa", "Professor", "teresa@edu.tw",
      "825", "4059"),
    ...);
...

【執行結果】

【參考資料】

[1] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html
[2] JavaFX：http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang