Question

我有一个存储数据的tableview，并且工作得很好，除了我似乎无法使水平网格线可见。我已经尝试了here建议的内容，但它并不适合我。我环顾四周，找不到任何其他有关此问题的建议。

CSS：

.column-header-background { 
visibility: hidden; -fx-padding: -1em; 
}

.table-view {
-fx-table-cell-border-color: black;
} 

.table-view .table-row-cell {
-fx-border-width: 1;
}

Cell Factory：

public class StitchCell extends TableCell<ObservableList<Stitch>, Color> {

@Override 
protected void updateItem(Color color, boolean empty) {
    super.updateItem(color, empty);

    int r = (int) (color.getRed() * 255);
    int g = (int) (color.getGreen() * 255);
    int b = (int) (color.getBlue() * 255);


    if (empty || color == null) {
        this.setStyle("-fx-background-color: white");
    } else {
        this.setStyle("-fx-background-color: rgb(" + r + "," + g + "," + b + ")");
    }
}
}

创建表：

protected TableView<ObservableList<Stitch>> call() throws Exception {
    pattern.setItems(stitchList);

    for (ObservableList<Stitch> row : stitchList) {

        for (int i= pattern.getColumns().size(); i<row.size(); i++){
            TableColumn<ObservableList<Stitch>, Color> column = new TableColumn<>();
            final int columnIndex = i ;
            column.setCellValueFactory( rowData -> 
                rowData.getValue() // the row value, i.e. an ObservableList<Stitch>
                    .get(columnIndex) // the Stitch for this cell
                    .getDisplayColorProperty() );

            column.setCellFactory(col -> new StitchCell());
            column.setEditable(true);
            column.setMinWidth(5);
            column.setPrefWidth(5);
            column.setMaxWidth(5);
            pattern.getColumns().add(column);
        }
    }
    pattern.setFixedCellSize(5);
    pattern.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    pattern.getSelectionModel().setCellSelectionEnabled(true);


    return pattern;
} // End Call

提前致谢！

Answer 1

默认情况下，单元格具有以下样式：

.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}

默认情况下，唯一的颜色边框是右边（黑色）。

由于在单元格工厂中，您将背景颜色设置为非null，因此它与默认边框重叠。所以解决方案很简单，你只需要设置底部边框的颜色：

@Override 
protected void updateItem(Color color, boolean empty) {
    super.updateItem(color, empty);

    int r = (int) (color.getRed() * 255);
    int g = (int) (color.getGreen() * 255);
    int b = (int) (color.getBlue() * 255);

    if (empty || color == null) {
        this.setStyle("-fx-background-color: white; "
             + "-fx-border-color: transparent -fx-table-cell-border-color -fx-table-cell-border-color transparent;");
    } else {
        this.setStyle("-fx-background-color: rgb(" + r + "," + g + "," + b + ");" 
             + "-fx-border-color: transparent -fx-table-cell-border-color -fx-table-cell-border-color transparent;");
    }

}

在JavaFX tableview中消失水平网格线

1 个答案: