如何在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电子表格.我正在使用的代码与此示例中看到的代码非常相似,但我的代码已被修改为实际工作:)

以下是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;
}

请记住,您可以删除样式表并将其添加到场景中,这将加快您的开发时间.

Answer 2

.tree-table-cell {
    -fx-border-color: black;
    -fx-border-style: solid;
}

转到caspian.css并查看所有表格单元格并在前面添加"tree-".他们有很多子样式和选择器.

我认为'*'不起作用,因为默认颜色是透明的.

Answer 3

根据@tunabot 的回答和@Grochni 的评论，我做了一些修复，并添加了代码来隐藏表格末尾的空行，当它只有几行时。我在这里分享给需要它的人。

.tree-table-row-cell {
    -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
    -fx-background-insets: 0, 0 0 1 0;
}

.tree-table-row-cell:odd {
    -fx-background-color: -fx-table-cell-border-color, #F9F9F9;
    -fx-background-insets: 0, 0 0 1 0;
}

.tree-table-row-cell:selected,
.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;
}

.tree-table-row-cell:selected .tree-table-cell {
    -fx-text-fill: white;
}

.tree-table-row-cell:empty {
    -fx-background-color: transparent;
}

.tree-table-row-cell:empty .tree-table-cell {
    -fx-border-width: 0px;
}