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

2022-01-18 00:00:00 grid gridview java vaadin

我正在使用 Vaadin，我想为我的网格/表格中的特定单元格设置背景颜色，或者如果无法为特定单元格设置背景颜色，我想至少为特定单元格设置字体颜色网格/表格.我有一个网格/表格的代码 TableView 如下:

I am using Vaadin and I would like to set backgroung color to specific cell in my grid/table or if there is no possible to set background color to specific cell I would like to at least set a font color to specific cell in grid/table. The code TableView where I have got a grid/table is below:

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);
    }
}

网格/表格的内容类是:

The content class for grid/table is:

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"我想让它变成黄色.非常感谢.

If it is possible to set background color to specific cell or at least set font color and you know how to do it please write. E.g. where cell's value in grid/table is "1" I would like to make it red but if e.g. cell's value is "5" I would like to make it green and if cell's value is "3" I would like to make it yellow. Thank you very much.

推荐答案

您有两个选项可以在 Vaadin 中设置 Grid 内容的样式.

You have two options to style the content of a Grid in Vaadin.

首先，要设置一行的样式，你可以这样做:

First, to set the style of a row, you can do the following:

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

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

The css class highlighted will be added to each grid row, were the condition applies. You can then style the row in SCSS using the following selector:

.v-grid-row.highlighted {
  color: red;
}

要选择单元格并设置样式，您需要选择 td:

To select and style the cells, you need to select the td's:

.v-treegrid-row.highlighted > td {
  color: red;
}

我猜你想直接设置单元格的样式，因此将样式生成器设置为每列模式会更合适，如下例所示:

I guess you'd want to style the cells directly so it would be more appropriate to set the style generator on a per-column mode as in following example:

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 中设置单元格样式:

You can then style the cells in SCSS:

.v-grid-cell.red {
  color: red;
}

相关文章