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;
}

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

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;
}

Answer 4

如果您使用modena.css并且只想修改TreeTableView看起来像TableView，请尝试使用以下代码。生成的TreeTableView具有/包含：

水平边框
不同颜色的奇数行
与TableView

CSS文件：

/* Let TreeTableView rows look like TableView rows  */
 .tree-table-row-cell {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}
/* Let odd rows look different */
.tree-table-row-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}
/* Selected when control is focused */
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:selected {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}
/* Selected when control is not focused */
.tree-table-row-cell:filled:selected {
    -fx-background: -fx-selection-bar-non-focused;
    -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
}

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

4 个答案: