java - 在 TreeTableView 中选择子项时，还要选择父项直到根

Question

我们尝试实现以下目标：

当一个节点在 JavaFX 中被选中时TreeTableView，“到根的路径”，即父级、祖父级等也应该被选中。在这种情况下选择意味着以不同的背景颜色突出显示，请参见图像（在示例中，Level 2 上的节点已被用户单击）。

是否有内置功能如何实现这一点？我们尝试使用 CSS 但没有成功。

Answer 1

没有“内置功能”可以做到这一点。在树表视图上使用行工厂来创建观察所选项目的行，并相应地在行上设置伪类。

例如：

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.css.PseudoClass;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableRow;
import javafx.scene.control.TreeTableView;
import javafx.stage.Stage;

public class TreeTableViewHighlightSelectionPath extends Application {

    @Override
    public void start(Stage primaryStage) {
        TreeTableView<Item> table = new TreeTableView<Item>();

        PseudoClass ancestorOfSelection = PseudoClass.getPseudoClass("ancestor-of-selection");

        table.setRowFactory(ttv -> new TreeTableRow<Item>() {

            {
                table.getSelectionModel().selectedItemProperty().addListener(
                        (obs, oldSelection, newSelection) -> updateStyleClass());
            }
            @Override
            protected void updateItem(Item item, boolean empty) {
                super.updateItem(item, empty);
                updateStyleClass();
            }

            private void updateStyleClass() {
                pseudoClassStateChanged(ancestorOfSelection, false);
                TreeItem<Item> treeItem = table.getSelectionModel().getSelectedItem();
                if (treeItem != null) {
                    for (TreeItem<Item> parent = treeItem.getParent() ; parent != null ; parent = parent.getParent()) {
                        if (parent == getTreeItem()) {
                            pseudoClassStateChanged(ancestorOfSelection, true);
                            break ;
                        }
                    }
                }
            }
        });

        TreeTableColumn<Item, String> itemCol = new TreeTableColumn<>("Item");
        itemCol.setCellValueFactory(cellData -> new SimpleStringProperty(cellData.getValue().getValue().getName()));
        table.getColumns().add(itemCol);

        TreeTableColumn<Item, Number> valueCol = new TreeTableColumn<>("Value");
        valueCol.setCellValueFactory(cellData -> cellData.getValue().getValue().valueProperty());
        table.getColumns().add(valueCol);

        table.setRoot(createRandomTree());

        Scene scene = new Scene(table);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private TreeItem<Item> createRandomTree() {
        TreeItem<Item> root = new TreeItem<>(new Item("Item 1", 0));
        Random rng = new Random();
        List<TreeItem<Item>> items = new ArrayList<>();
        items.add(root);

        for (int i = 2 ; i <= 20 ; i++) {
            TreeItem<Item> item = new TreeItem<>(new Item("Item "+i, rng.nextInt(1000)));
            items.get(rng.nextInt(items.size())).getChildren().add(item);
            items.add(item);
        }

        return root ;
    }

    public static class Item {
        private final String name ;
        private final IntegerProperty value = new SimpleIntegerProperty();

        public Item(String name, int value) {
            this.name = name ;
            setValue(value);
        }

        public String getName() {
            return name ;
        }

        public IntegerProperty valueProperty() {
            return value ;
        }

        public final int getValue() {
            return valueProperty().get();
        }

        public final void setValue(int value) {
            valueProperty().set(value);
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

现在您可以在 CSS 中设置“选定节点的祖先”的样式：

文件样式.css：

.tree-table-row-cell:ancestor-of-selection {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

（您可能想要修改 CSS 以获得更好的控制，例如为非焦点表格中的选定行设置不同的颜色等。有关默认样式的详细信息，请参阅默认样式表。）

这是上述测试应用程序的屏幕截图：