fxml - 如何在 TreeTableView 中显示行的网格线

Question

我有以下 FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="1000.0" stylesheets="@../css/fxmlDemo.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxmldemo.controller.MainController">
    <children>
        <TreeTableView fx:id="treeTableView" prefHeight="600.0" prefWidth="1000.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns:fx="http://javafx.com/fxml">
            <columns>
                <TreeTableColumn fx:id="nameColumn" prefWidth="600.0" text="Name" />
                <TreeTableColumn fx:id="sizeColumn" prefWidth="100.0" text="Size" />
                <TreeTableColumn fx:id="lastModifiedColumn" prefWidth="300.0" text="Modified" />
            </columns>
        </TreeTableView>
    </children>
</AnchorPane>

在我的 fxmlDemo.css 文件中，我尝试了如下操作:

* { 
  -fx-border-style: solid;
}

和

tree-table-view { 
  -fx-border-style: solid;
}

和

tree-item { 
  -fx-border-style: solid;
}

第一个在 FXML 中的所有内容周围放置一个边框，其他两个什么都不做。

我想要的是像 Excel 电子表格一样显示网格线。我使用的代码与 this 中看到的非常相似例如，但我的已经修改为实际工作:)

Here是指向 Java FX CSS 引用指南的链接，但它不包含有关 TreeTableView 或其子组件的信息。

Answer 1

使用以下 CSS，我能够将 TreeTableView 配置为看起来与 TableView 非常相似。

.tree-table-row-cell {
    -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
    -fx-text-fill: -fx-text-inner-color;
}
.tree-table-row-cell:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
    -fx-background-insets: 0, 1, 2;
}

.tree-table-row-cell:odd {
    -fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%);
    -fx-background-insets: 0, 0 0 1 0;
}

.tree-table-row-cell:selected:odd {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
    -fx-background-insets: 0, 1, 2;
}

请记住，您可以在场景中删除和添加样式表，这将加快您的开发时间。