0

我们尝试实现以下目标:

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

在此处输入图像描述

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

4

1 回答 1

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 以获得更好的控制,例如为非焦点表格中的选定行设置不同的颜色等。有关默认样式的详细信息,请参阅默认样式表。)

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

在此处输入图像描述

于 2017-10-30T13:58:34.773 回答