在TreeTableView中选择子对象时，也要从根上选择父母

Question

我们努力实现以下目标：

当节点在JavaFX TreeTableView中被选中时，也应该选择“根路径”，即父节点、祖父母路径等等。在这种情况下选中意味着用不同的背景色高亮显示，请参阅图像(在本例中，第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中对“选定节点的祖先”进行样式设置：

文件style.css：

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

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

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

​

​