我正在使用Vaadin,我想为我的表格/表格中的特定单元格设置背景色,或者如果无法为特定表格中的单元格设置背景色,我想至少为表格/表格中的特定单元格设置字体颜色。我有一个表格/表格的代码TableView如下:
package com.trading.scraper; import com.vaadin.navigator.View; import com.vaadin.ui.CustomComponent; import com.vaadin.ui.Grid; import com.vaadin.ui.VerticalLayout; import java.util.Arrays; import java.util.List; class TableView extends CustomComponent implements View { static final String NAME = "Stock table"; TableView() { final VerticalLayout layout = new VerticalLayout(); List<Stock> people = Arrays.asList( new Stock("1", "2", "1"), new Stock("3", "5", "2"), new Stock("1", "3", "4")); Grid<Stock> grid = new Grid<>(); grid.setWidth(100, Unit.PERCENTAGE); grid.setItems(people); grid.addColumn(Stock::getValue1).setCaption("Value1"); grid.addColumn(Stock::getValue2).setCaption("Value2"); grid.addColumn(Stock::getValue3).setCaption("Value3"); layout.addComponents(grid); setCompositionRoot(layout); } }
表格/表格的内容类为:
package com.trading.scraper; public class Stock { private String value1; private String value2; private String value3; public String getValue1() { return value1; } public void setValue1(String value1) { this.value1 = value1; } public String getValue2() { return value2; } public void setValue2(String value2) { this.value2 = value2; } public String getValue3() { return value3; } public void setValue3(String value3) { this.value3 = value3; } public Stock() { } Stock(String value1, String value2, String value3) { this.value1 = value1; this.value2 = value2; this.value3 = value3; } }
如果可以将背景颜色设置为特定的单元格,或者至少设置字体颜色,并且您知道该怎么做,请写信。例如,在表格/表格中单元格的值为“ 1”的情况下,我想将其设置为红色,但是如果例如单元格的值为“ 5”,则我希望将其设置为绿色,如果单元格的值为“ 3”,则希望将其设置为黄色。 。非常感谢你。
Grid在Vaadin中,您有两个选择来设置a内容的样式。
Grid
首先,要设置行的样式,可以执行以下操作:
grid.setStyleGenerator(stockRow -> "1".equals(stockRow.getValue1()) ? "highlighted" : null);
如果highlighted条件适用,css类将添加到每个网格行。然后,您可以使用以下选择器在SCSS中设置行的样式:
highlighted
.v-grid-row.highlighted { color: red; }
要选择单元格并为其设置样式,您需要选择td:
.v-treegrid-row.highlighted > td { color: red; }
我想您可能想直接对单元格设置样式,因此在每个列模式下设置样式生成器会更合适,如以下示例所示:
grid .addColumn(Stock::getValue1) .setCaption("Value1") .setStyleGenerator(stockRow -> { switch (stockRow.getValue1()) { case "1": return "red"; case "3": return "yellow"; case "5": return "green"; default: return null; } });
然后可以在SCSS中设置单元格的样式:
.v-grid-cell.red { color: red; }