以编程方式更改 TableView 行外观
Posted
技术标签:
【中文标题】以编程方式更改 TableView 行外观【英文标题】：Programmatically change the TableView row appearance 【发布时间】：2013-12-19 10:45:13 【问题描述】：在完成Oracle tutorial about the TableView 之后，我想知道是否有办法以编程方式将不同的 CSS 样式应用于选定的 TableView 行。例如，用户选择某一行，单击“突出显示”按钮，所选行变为棕色背景、白色文本填充等。我读过JavaFX tableview colors、Updating TableView row appearance 和Background with 2 colors in JavaFX?，但无济于事=/
来源：
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class TableViewSample extends Application
private TableView<Person> table = new TableView<Person>();
private final ObservableList<Person> data =
FXCollections.observableArrayList(
new Person("Jacob", "Smith", "jacob.smith@example.com"),
new Person("Isabella", "Johnson", "isabella.johnson@example.com"),
new Person("Ethan", "Williams", "ethan.williams@example.com"),
new Person("Emma", "Jones", "emma.jones@example.com"),
new Person("Michael", "Brown", "michael.brown@example.com")
);
public static void main(String[] args)
launch(args);
@Override
public void start(Stage stage)
Scene scene = new Scene(new Group());
stage.setTitle("Table View Sample");
stage.setWidth(450);
stage.setHeight(600);
final Label label = new Label("Address Book");
label.setFont(new Font("Arial", 20));
TableColumn firstNameCol = new TableColumn("First Name");
firstNameCol.setMinWidth(100);
firstNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("firstName"));
TableColumn lastNameCol = new TableColumn("Last Name");
lastNameCol.setMinWidth(100);
lastNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("lastName"));
TableColumn emailCol = new TableColumn("Email");
emailCol.setMinWidth(200);
emailCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("email"));
table.setItems(data);
table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);
final Button btnHighlight = new Button("Highlight selected row");
btnHighlight.setMaxWidth(Double.MAX_VALUE);
btnHighlight.setPrefHeight(30);
btnHighlight.setOnAction(new EventHandler<ActionEvent>()
public void handle(ActionEvent e)
// this is where the CSS should be applied
);
final VBox vbox = new VBox();
vbox.setSpacing(5);
vbox.setPadding(new Insets(10, 0, 0, 10));
vbox.getChildren().addAll(label, table, btnHighlight);
((Group) scene.getRoot()).getChildren().addAll(vbox);
stage.setScene(scene);
stage.show();
public static class Person
private final SimpleStringProperty firstName;
private final SimpleStringProperty lastName;
private final SimpleStringProperty email;
private Person(String fName, String lName, String email)
this.firstName = new SimpleStringProperty(fName);
this.lastName = new SimpleStringProperty(lName);
this.email = new SimpleStringProperty(email);
public String getFirstName()
return firstName.get();
public void setFirstName(String fName)
firstName.set(fName);
public String getLastName()
return lastName.get();
public void setLastName(String fName)
lastName.set(fName);
public String getEmail()
return email.get();
public void setEmail(String fName)
email.set(fName);
以及 application.css，“突出显示选定行”按钮从中将 highlightRow 类应用于选定的表格行：
.highlightedRow
-fx-background-color: brown;
-fx-background-insets: 0, 1, 2;
-fx-background: -fx-accent;
-fx-text-fill: -fx-selection-bar-text;
编辑：
经过几个小时的尝试，我能想到的最好的办法是使用下面的代码this：
firstNameCol.setCellFactory(new Callback<TableColumn<Person, String>, TableCell<Person, String>>()
@Override
public TableCell<Person, String> call(TableColumn<Person, String> personStringTableColumn)
return new TableCell<Person, String>()
@Override
protected void updateItem(String name, boolean empty)
super.updateItem(name, empty);
if (!empty)
if (name.toLowerCase().startsWith("e") || name.toLowerCase().startsWith("i"))
getStyleClass().add("highlightedRow");
setText(name);
else
setText("empty"); // for debugging purposes
;
);
我不太明白的部分是为什么我不能从btnHighlight 的setOnAction 方法内部做到这一点？之后我也尝试过刷新表格（described here），但它似乎没有用。另外，我的“解决方案”仅适用于firstNameCol 列，因此是否必须为每一列设置新的单元格工厂才能应用某种样式，还是有更智能的解决方案？
【问题讨论】：
【参考方案1】：这是一个丑陋的黑客解决方案。首先，定义一个名为 highlightRow 的 int 字段。然后在 TableView 上设置行工厂：
table.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>()
@Override public TableRow<Person> call(TableView<Person> param)
return new TableRow<Person>()
@Override protected void updateItem(Person item, boolean empty)
super.updateItem(item, empty);
if (getIndex() == highlightedRow)
getStyleClass().add("highlightedRow");
else
getStyleClass().remove("highlightedRow");
;
);
然后在你的按钮中添加以下代码（这就是丑陋的黑客发挥作用的地方）：
btnHighlight.setOnAction(new EventHandler<ActionEvent>()
public void handle(ActionEvent e)
// set the highlightedRow integer to the selection index
highlightedRow = table.getSelectionModel().getSelectedIndex();
// force a tableview refresh - HACK
List<Person> items = new ArrayList<>(table.getItems());
table.getItems().setAll(items);
);
完成后，您会在所选行上获得棕色突出显示。您当然可以通过将 int 替换为 itns 列表来轻松支持多个棕色高亮显示。
【讨论】：
如果您使用 IntegerProperty 而不是普通 int，您可以观察属性的变化并摆脱黑客攻击。 我最喜欢这个答案，可能是因为我可以清楚地理解发生了什么并且很容易理解。不起作用的是表格不会自行刷新（未应用 CSS），直到我按名字/姓氏/等对其进行排序。所以，黑客并没有真正强制刷新，至少在我的情况下不是。 @James_D，我创建了private SimpleIntegerProperty highlightedRow = new SimpleIntegerProperty(-1)，然后我只检查getIndex() == highlightedRow.get() 是否并应用CSS 样式。这似乎有效，但同样，直到我通过排序“手动”刷新表格。
为避免“手动刷新”黑客攻击，您需要使用 IntegerProperty 注册一个侦听器，并在行的样式类更改时更新它。
为 CSS 类使用更健壮的名称，例如“row-even”和“row-odd”而不是“highlightedRow”。这样，除了高亮/低亮之外，您还可以为每一行分配不同的样式。如果您需要突出显示用户正在鼠标悬停的行，它将在未来为您提供帮助。【参考方案2】：
如何创建一个行工厂来公开要突出显示的表行索引的可观察列表？这样您就可以使用需要突出显示的索引来简单地更新列表：例如，通过在选择模型上调用 getSelectedIndices() 并将其传递给列表的 setAll(...) 方法。
这可能看起来像：
import java.util.Collections;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.util.Callback;
public class StyleChangingRowFactory<T> implements
Callback<TableView<T>, TableRow<T>>
private final String styleClass ;
private final ObservableList<Integer> styledRowIndices ;
private final Callback<TableView<T>, TableRow<T>> baseFactory ;
public StyleChangingRowFactory(String styleClass, Callback<TableView<T>, TableRow<T>> baseFactory)
this.styleClass = styleClass ;
this.baseFactory = baseFactory ;
this.styledRowIndices = FXCollections.observableArrayList();
public StyleChangingRowFactory(String styleClass)
this(styleClass, null);
@Override
public TableRow<T> call(TableView<T> tableView)
final TableRow<T> row ;
if (baseFactory == null)
row = new TableRow<>();
else
row = baseFactory.call(tableView);
row.indexProperty().addListener(new ChangeListener<Number>()
@Override
public void changed(ObservableValue<? extends Number> obs,
Number oldValue, Number newValue)
updateStyleClass(row);
);
styledRowIndices.addListener(new ListChangeListener<Integer>()
@Override
public void onChanged(Change<? extends Integer> change)
updateStyleClass(row);
);
return row;
public ObservableList<Integer> getStyledRowIndices()
return styledRowIndices ;
private void updateStyleClass(TableRow<T> row)
final ObservableList<String> rowStyleClasses = row.getStyleClass();
if (styledRowIndices.contains(row.getIndex()) )
if (! rowStyleClasses.contains(styleClass))
rowStyleClasses.add(styleClass);
else
// remove all occurrences of styleClass:
rowStyleClasses.removeAll(Collections.singleton(styleClass));
现在你可以做
final StyleChangingRowFactory<Person> rowFactory = new StyleChangingRowFactory<>("highlightedRow");
table.setRowFactory(rowFactory);
在你的按钮的动作处理程序中做
rowFactory.getStyledRowIndices().setAll(table.getSelectionModel().getSelectedIndices());
因为 StyleChangingRowFactory 包装了另一个行工厂，如果您已经有一个想要使用的自定义行工厂实现，您仍然可以使用它。例如：
final StyleChangingRowFactory<Person> rowFactory = new StyleChangingRowFactory<Person>(
"highlightedRow",
new Callback<TableView<Person>, TableRow<Person>>()
@Override
public TableRow<Person> call(TableView<Person> tableView)
final TableRow<Person> row = new TableRow<Person>();
ContextMenu menu = new ContextMenu();
MenuItem removeMenuItem = new MenuItem("Remove");
removeMenuItem.setOnAction(new EventHandler<ActionEvent>()
@Override
public void handle(ActionEvent event)
table.getItems().remove(row.getItem());
);
menu.getItems().add(removeMenuItem);
row.contextMenuProperty().bind(
Bindings.when(row.emptyProperty())
.then((ContextMenu) null)
.otherwise(menu));
return row;
);
table.setRowFactory(rowFactory);
Here 是一个完整的代码示例。
【讨论】：
在 JavaFX8 中，您可能可以使用伪类重写它，而不是直接操作样式类。我认为这会更有效率，而且可能会更好一些。 我非常感谢您花时间写出这样的长答案，但我一直在寻找更易于理解、更简洁、更容易理解的东西。我已经尝试了您的代码，它按预期工作，现在我试图找出“自动刷新表”的来源以及如何在我的代码中以更简单的形式实现它，如果可能的话。跨度> 刷新是因为有一个注册了行索引列表的监听器，只要列表的内容发生变化，它就会更新行的样式类：styledRowIndices.addListener(...); JavaFX 确实由可观察的属性和集合提供支持：如果不了解它们，您将无法真正走得太远，除了收听属性和可观察的更改列表之外，这里几乎没有什么。有一个关于属性的教程linkhere[/link]。 JavaFX 8 版本，使用伪类，在gist.github.com/james-d/7912548 更好。【参考方案3】：我可能发现了一些有用的东西：
添加此代码后，如果您按下按钮，突出显示的行会改变颜色，当您选择不同的行时颜色会恢复为默认值，当您再次按下按钮时，它会将新行的颜色更改为棕色。
final String css = getClass().getResource("style.css").toExternalForm();
final Scene scene = new Scene(new Group());
btnHighlight.setOnAction(new EventHandler<ActionEvent>()
@Override
public void handle(ActionEvent e)
scene.getStylesheets().add(css);
);
table.getSelectionModel().selectedIndexProperty()
.addListener(new ChangeListener<Number>()
@Override
public void changed(ObservableValue<? extends Number> ov, Number t, Number t1)
scene.getStylesheets().remove(css);
);
css:
.table-row-cell:selected
-fx-background-color: brown;
-fx-text-inner-color: white;
此解决方案的唯一问题是，如果您连续按两次按钮，您选择的下一行已经是棕色的。您必须为此使用单独的 css 文件，否则在应用程序启动时不会应用 css 规则，直到您按下按钮。
【讨论】：
我认为添加和删除整个样式表比仅启用和禁用伪类要昂贵得多。【参考方案4】：如果您不希望我发布here 的解决方案具有可重用性，这实际上是一回事，但对行工厂使用匿名内部类而不是独立类。也许代码更容易理解，因为它都在一个地方。这是乔纳森的解决方案和我的解决方案之间的一种混合，但会自动更新亮点，而不是强制它进行排序。
我使用了一个整数列表，因此它支持多项选择，但如果您不需要它，您显然可以使用 IntegerProperty 代替。
这是行工厂：
final ObservableList<Integer> highlightRows = FXCollections.observableArrayList();
table.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>()
@Override
public TableRow<Person> call(TableView<Person> tableView)
final TableRow<Person> row = new TableRow<Person>()
@Override
protected void updateItem(Person person, boolean empty)
super.updateItem(person, empty);
if (highlightRows.contains(getIndex()))
if (! getStyleClass().contains("highlightedRow"))
getStyleClass().add("highlightedRow");
else
getStyleClass().removeAll(Collections.singleton("highlightedRow"));
;
highlightRows.addListener(new ListChangeListener<Integer>()
@Override
public void onChanged(Change<? extends Integer> change)
if (highlightRows.contains(row.getIndex()))
if (! row.getStyleClass().contains("highlightedRow"))
row.getStyleClass().add("highlightedRow");
else
row.getStyleClass().removeAll(Collections.singleton("highlightedRow"));
);
return row;
);
下面是一些按钮的外观：
final Button btnHighlight = new Button("Highlight");
btnHighlight.disableProperty().bind(Bindings.isEmpty(table.getSelectionModel().getSelectedIndices()));
btnHighlight.setOnAction(new EventHandler<ActionEvent>()
@Override
public void handle(ActionEvent event)
highlightRows.setAll(table.getSelectionModel().getSelectedIndices());
);
final Button btnClearHighlight = new Button("Clear Highlights");
btnClearHighlight.disableProperty().bind(Bindings.isEmpty(highlightRows));
btnClearHighlight.setOnAction(new EventHandler<ActionEvent>()
@Override
public void handle(ActionEvent event)
highlightRows.clear();
);
【讨论】：
效果很好，是的，它更容易理解。我没有更新问题状态，因为我正在弄清楚您链接的教程，之后我发现您的第一个答案更好，因为它可以（如您所指出的）重复使用。这就是我最终得到的 - 自定义行工厂，它可以在不强制刷新的情况下对行进行样式设置。而且我还学到了一些关于 JavaFX TableView 工作方式的新知识。谢谢！【参考方案5】：我发现最好的解决方案是监听 row.itemProperty() 的变化，因为当你排序时，例如行会改变索引，所以行会自动得到通知。
【讨论】：
【参考方案6】：我发现最好的方法：
在我的 CSS 中
.table-row-cell:feederChecked
-fx-background-color: #06FF00;
在我的表初始化中，我的 ObservableList 中的对象内容的 SimpleBooleanProperty：
// The pseudo classes feederChecked that were defined in the css file.
PseudoClass feederChecked = PseudoClass.getPseudoClass("feederChecked");
// Set a rowFactory for the table view.
tableView.setRowFactory(tableView ->
TableRow<Feeder> row = new TableRow<>();
ChangeListener<Boolean> changeListener = (obs, oldFeeder, newFeeder) ->
row.pseudoClassStateChanged(feederChecked, newFeeder);
;
row.itemProperty().addListener((obs, previousFeeder, currentFeeder) ->
if (previousFeeder != null)
previousFeeder.feederCheckedProperty().removeListener(changeListener);
if (currentFeeder != null)
currentFeeder.feederCheckedProperty().addListener(changeListener);
row.pseudoClassStateChanged(feederChecked, currentFeeder.getFeederChecked());
else
row.pseudoClassStateChanged(feederChecked, false);
);
return row;
);
代码改编自this complete exemple
【讨论】：
以上是关于以编程方式更改 TableView 行外观的主要内容，如果未能解决你的问题，请参考以下文章