I want to change the row background color into green when to select a row. However, although the selected row was changed color, the additionally wrong row was also changed color. I can't figure out why??
This is a JavaFX program coding in Intellij of Windows 10.
TestFXML.java:
public class TestFXML implements Initializable {
@FXML
TableView<ItemLog> table;
@FXML
TableColumn<ItemLog,String> column1,column2,column4;
@FXML
TableColumn<ItemLog,Number> column3;
@Override
public void initialize(URL location, ResourceBundle resources) {
ObservableList<ItemLog> root=FXCollections.observableArrayList();
root.addAll(
new ItemLog("E0001","2.5㎟ XLPE", 1.2,"m"),
new ItemLog("E0002","4㎟ XLPE",1.5,"m"),
new ItemLog("E0003","6㎟ XLPE",2.0,"m"),
new ItemLog("E0004","10㎟ XLPE",4.0,"m"),
new ItemLog("E0005","16㎟ XLPE",6.2,"m"),
new ItemLog("E0006","25㎟ XLPE",9.1,"m"),
new ItemLog("E0007","35㎟ XLPE",14.5,"m"),
new ItemLog("E0008","50㎟ XLPE",20.6,"m"),
new ItemLog("E0009","70㎟ XLPE",31.2,"m"),
new ItemLog("E00010","120㎟ XLPE",40.5,"m"),
new ItemLog("E00011","150㎟ XLPE",55.3,"m"),
new ItemLog("E00012","185㎟ XLPE",78.8,"m"),
new ItemLog("E00013","240㎟ XLPE",96.0,"m"),
new ItemLog("E0101","2.5㎟ PVC", 1.2,"m"),
new ItemLog("E0102","4㎟ PVC",0.8,"m"),
new ItemLog("E0103","6㎟ PVC",1.2,"m"),
new ItemLog("E0104","10㎟ PVC",2.1,"m"),
new ItemLog("E0105","16㎟ PVC",4.3,"m"),
new ItemLog("E0106","25㎟ PVC",6.8,"m"),
new ItemLog("E0107","35㎟ PVC",9.5,"m"),
new ItemLog("E0108","50㎟ PVC",12.8,"m"),
new ItemLog("E0109","70㎟ PVC",16.9,"m"),
new ItemLog("E01010","120㎟ PVC",21.5,"m"),
new ItemLog("E01011","150㎟ PVC",27.6,"m"),
new ItemLog("E01012","185㎟ PVC",38.4,"m"),
new ItemLog("E01013","240㎟ PVC",52.9,"m")
);
table.setItems(root);
column1.setCellValueFactory(param -> param.getValue().code);
column2.setCellValueFactory(param -> param.getValue().description);
column3.setCellValueFactory(param -> param.getValue().price);
column4.setCellValueFactory(param -> param.getValue().unit);
//To change selected row color into green
table.getFocusModel().focusedCellProperty().addListener((observable, oldValue, newValue) -> {
if(newValue.getTableColumn() != null){
newValue.getTableColumn().setCellFactory(param -> new TableCell(){
@Override
protected void updateItem(Object item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
setGraphic(null);
}else{
setText(item.toString());
if(this.getIndex()==newValue.getRow()){
this.getTableRow().setStyle("-fx-background-color:green");
}
}
}
});
}
});
}
private class ItemLog {
StringProperty code=new SimpleStringProperty();
StringProperty description=new SimpleStringProperty();
DoubleProperty price=new SimpleDoubleProperty();
StringProperty unit=new SimpleStringProperty();
ItemLog(String code, String description, Double price, String unit) {
this.code.set(code);
this.description.set(description);
this.price.set(price);
this.unit.set(unit);
}
}
}
TestFXML.fxml:
<Pane prefHeight="414.0" prefWidth="602.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.TestFXML">
<children>
<TableView fx:id="table" maxHeight="1.7976931348623157E308" prefHeight="421.0" prefWidth="602.0">
<columns>
<TableColumn fx:id="column1" editable="false" prefWidth="100.0" text="A" />
<TableColumn fx:id="column2" editable="false" prefWidth="300.0" text="B" />
<TableColumn fx:id="column3" editable="false" prefWidth="100.0" text="C" />
<TableColumn fx:id="column4" editable="false" prefWidth="100.0" text="D" />
</columns>
</TableView>
</children>
</Pane>
I expected when I select 1st row, only 1st row changes in to green color. Actual result is when I selected 1st row, 1st and 19th rows changed in to green color.
There are 3 issues with your approach:
TableView
usually does not recreate the cells, if the cellFactory
changes. Each cellFactory
chooses to highlight a cell based on the focused cell at the time the cellFactory
creating the cell was created . Even if cells were recreated, you'd still see highlighted cells in other columns, since you never change back to a cellFactory
not highlighting cells. Doing those modifications is much simpler, if you use a CSS stylesheet, since TableCell
s get assigned a pseudo class when they get focused allowing you to only define the style of focused cells without the need to worry about cellFactory
s:
style.css
.table-cell:selected {
-fx-background-color: green;
}
fxml
<Pane stylesheets="style.css" prefHeight="414.0" prefWidth="602.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.TestFXML">
...
</Pane>
Remove the cellFactory
assignments from your java code for the above approach to work.
To only style specific TableView
s this way you could eg add a style class to the TableView
and select it based on the style class of the TableView
, eg
.my-tableview .table-cell:selected {
-fx-background-color: green;
}
Also it becomes much simpler to combine different criteria, eg
/* style for selected and hovered cell */
.table-cell:selected:hover {
-fx-background-color: yellow;
}
I got the solution by myself. To Modify that:
if(this.getIndex()==newValue.getRow()){
this.getTableRow().setStyle("-fx-background-color:green");
}
into:
if(this.getIndex()==newValue.getRow()){
this.getTableRow().setStyle("-fx-background-color:green");
}else{
this.getTableRow().setStyle("");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.