如何在Vaadin表格中实现列间单元格值对比并着色？

你现在的代码是做同列上下行的数值对比，要改成同一行内Value1和Value2的对比其实很简单，只需要调整Grid列的setStyleGenerator逻辑，不再依赖上一行的历史值，而是直接拿当前行的两个字段做比较就行。

核心修改思路： #

1. 删掉原来用来存储上一行数值的prev_value_1和prev_value_2变量——我们现在不需要和上一行比了；
2. 在每个列的样式生成器里，同时获取当前行的value1和value2数值，直接做大小对比；
3. 根据你想要的对比规则（比如Value1大于Value2时标绿，相等标黄，小于标红）返回对应的样式类。

修改后的完整TableView代码： #

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> stock_list = Arrays.asList( 
            new Stock("1", "2"), 
            new Stock("3", "1"), 
            new Stock("2", "3"), 
            new Stock("2", "3"), 
            new Stock("4", "5")); 
        Grid<Stock> grid = new Grid<>(); 
        grid.setWidth(100, Unit.PERCENTAGE); 
        grid.setItems(stock_list); 

        // Value1列：和当前行的Value2对比
        grid 
            .addColumn(Stock::getValue1) 
            .setCaption("Value1") 
            .setStyleGenerator(stockRow -> { 
                int val1 = Integer.parseInt(stockRow.getValue1()); 
                int val2 = Integer.parseInt(stockRow.getValue2()); 
                if (val1 > val2) {
                    return "green";
                } else if (val1 == val2) {
                    return "yellow";
                } else {
                    return "red";
                }
            }); 

        // Value2列：和当前行的Value1对比（规则可以按需调整）
        grid 
            .addColumn(Stock::getValue2) 
            .setCaption("Value2") 
            .setStyleGenerator(stockRow -> { 
                int val1 = Integer.parseInt(stockRow.getValue1()); 
                int val2 = Integer.parseInt(stockRow.getValue2()); 
                if (val2 > val1) {
                    return "green";
                } else if (val2 == val1) {
                    return "yellow";
                } else {
                    return "red";
                }
            }); 

        layout.addComponents(grid); 
        setCompositionRoot(layout); 
    } 
}

样式部分无需修改 #

你现有的styles.scss已经定义了red、yellow、green对应的字体颜色，直接沿用就好：

@import "mytheme.scss"; 
@import "addons.scss"; 

.mytheme { 
    @include addons; 
    @include mytheme; 
} 

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

这样修改后，每一行的Value1和Value2会互相对比，根据大小关系显示对应的颜色啦！比如第一行Value1是1，Value2是2，那么Value1会标红，Value2会标绿，非常直观。

内容的提问来源于stack exchange，提问作者user9209502