如何区分来自其他行的tableview聚焦行?

时间:2016-02-17 21:55:45

标签: css javafx styles javafx-8

我在JavaFX中有一个tableview,我不希望焦点行与其他行不同。问题是,当我点击一行并选择它时,行的底部边框就会消失。哪个css属性成功,我该如何解决?

在附加的屏幕截图中,所有行都被选中,我的最后一次点击是在“自然”行上。

enter image description here

MCVE: enter image description here

Main.java:

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        HBox hBox = new HBox();
        Scene scene = new Scene(hBox, 300, 275);
        scene.getStylesheets().add("main.css");

        TableView<Keyword> keywordsTable = new TableView<>();
        TableColumn<Keyword, String> wordColumn = new TableColumn<>();
        ObservableList<Keyword> data = FXCollections.observableArrayList();

        wordColumn.setCellValueFactory(new PropertyValueFactory<>("word"));
        keywordsTable.getColumns().add(wordColumn);
        keywordsTable.setItems(data);

        keywordsTable.setRowFactory(param -> {
            TableRow<Keyword> row = new TableRow<>();
            row.addEventFilter(MouseEvent.MOUSE_CLICKED, e -> {
                keywordsTable.requestFocus();
                if (!row.isEmpty() && e.getButton().equals(MouseButton.PRIMARY)) {
                    changeRowSelection(keywordsTable, row.getItem(), row.getIndex());
                }
                e.consume();
            });

            row.addEventFilter(MouseEvent.MOUSE_PRESSED, e -> {
                keywordsTable.requestFocus();
                e.consume();
            });
            return row;
        });

        keywordsTable.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

        data.add(new Keyword("one"));
        data.add(new Keyword("two"));
        data.add(new Keyword("three"));
        data.add(new Keyword("four"));
        data.add(new Keyword("five"));

        hBox.getChildren().add(keywordsTable);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void changeRowSelection(TableView table, Keyword keyword, int index) {
        if (table.getSelectionModel().getSelectedItems().contains(keyword)) {
            table.getSelectionModel().clearSelection(index);
        } else {
            table.getSelectionModel().select(index);
        }
    }


    public static void main(String[] args) {
        launch(args);
    }

    public class Keyword {

        private final SimpleStringProperty word;

        public Keyword(String word) {
            this.word = new SimpleStringProperty(word);
        }

        public String getWord() {
            return word.get();
        }

        public void setWord(String word) {
            this.word.set(word);
        }

    }
}

的main.css:

.table-row-cell:focused {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.list-cell:filled:selected,
.tree-cell:filled:selected,
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected {
    -fx-background: #C7E8EA;
    -fx-table-cell-border-color: #26ABD7 !important;
    -fx-text-fill: black;
}

.table-row-cell:focused {
    -fx-background-insets: 0 0 0;
}

.table-cell {
    -fx-background-insets: 0 !important; 
}

1 个答案:

答案 0 :(得分:2)

使用以下css对我有用

  

查看信息:https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html

.table-view {
  -my-bg-color: #C7E8EA;
  -my-bd-color: violet;
}

.table-row-cell {
  -fx-background: -my-bg-color;
  -fx-background-color: -my-bd-color, -fx-background;
  -fx-background-insets: 0, 0 0 1 0;
  -fx-padding: 0;
  -fx-text-fill: black;
}

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

请注意.table-view中的自定义css变量定义。这不是强制性的,只是为了方便。