Vaadin中如何在grid / table中设置单元格背景颜色？ [英] How to set cell background color in grid/table in view in Vaadin?

问题描述

我正在使用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; 
 
类TableView扩展CustomComponent implements视图{
 
 static final String NAME =Stock table; 
 
 TableView（）{
 final VerticalLayout layout = new VerticalLayout（）; 
 
列表< Stock> people = Arrays.asList（
 new Stock（1，2，1），
 new Stock（3，5，2），
新股票（1，3，4））; 
 
网格< 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）; 
 
 
  

grid / table的内容类是： p>

  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; 
 
 $ b $ public股票（）{
} 
 
股票（字符串值1，字符串值2，字符串值3）{
 this.value1 = value1; 
 this.value2 = value2; 
 this.value3 = value3; 
 
 
 
 
 $ b $ p 
 $ b 
如果可以将背景色设置为特定单元格或至少设置字体颜色，你知道该怎么做，请写。例如。在网格/表格中单元格的值是1我想使它变成红色，但如果例如单元格的值是5我想使它变成绿色，如果单元格的值是3，我想使它变成黄色。 
 
解决方案
您有两种选择方式来设置 Grid 在Vaadin。
 
 
 
首先，要设置一行的样式，您可以执行以下操作：
 
 
  grid.setStyleGenerator（stockRow  - > 
1.equals（stockRow.getValue1（））？highlighted：null）; 
  
突出显示的css类 将被添加到每个网格行，是条件适用。您可以使用以下选择器在SCSS中对行进行样式设置： 
 
 
  .v-grid-row.highlighted {
红色; 
 
 $ / code> 
要选择和设置单元格样式，您需要选择td：
  .v-treegrid-row.highlighted> td {
颜色：红色; 
} 
  
我想你会想要直接设置单元格样式，所以它会更多适合在每列模式下设置样式生成器，如下例所示：
  grid 
 .addColumn（Stock :: getValue1）
 .setCaption（Value1）
 .setStyleGenerator（stockRow  - > {
 switch（stockRow.getValue1（））{
 case1：return red; 
 case3：returnyellow; 
 case5：returngreen; 
 default：return null; 
} 
 }）; 
  
然后，您可以在SCSS中对单元格进行样式设置：
  .v-grid-cell.red {
 color：red; 
} 
  
 
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;
    }
}
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.
解决方案
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);
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;
}
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;
    }
  });
You can then style the cells in SCSS:
.v-grid-cell.red {
  color: red;
}


                        
这篇关于Vaadin中如何在grid / table中设置单元格背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！