小编典典

如何在Vaadin中设置表格/表格中的单元格背景颜色?

java

我正在使用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”,则希望将其设置为黄色。 。非常感谢你。


阅读 344

收藏
2020-11-26

共1个答案

小编典典

Grid在Vaadin中,您有两个选择来设置a内容的样式。

首先,要设置行的样式,可以执行以下操作:

grid.setStyleGenerator(stockRow -> 
  "1".equals(stockRow.getValue1()) ? "highlighted" : null);

如果highlighted条件适用,css类将添加到每个网格行。然后,您可以使用以下选择器在SCSS中设置行的样式:

.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;
}
2020-11-26