Java 基于内容的Vaadin 10网格样式单行

我使用Vaadin网格来显示传入的信息并实时更新。通过访问DOM，我可以设置所有行的样式，如下所示：

<dom-module id="my-grid" theme-for="vaadin-grid">
    <template>

        <style>
            [part="row"] {
                height: 27px;
                font-size: 14px;
                max-height: 27px;
            }

        </style>
    </template>
</dom-module>

到目前为止（vaadin10，vaadingrid 5），没有用于向网格中的单个行添加自定义属性/类的API。可以在应用程序代码中实现此用例，但实现可能不是很有效

一种方法是为网格的每一列定义一个自定义呈现器，将每个单元格内容包装在一个额外的div中，并向包装器添加类/属性。您可以使用

TemplateRenderer

来最小化这些包装器对内存/性能的影响：

Grid Grid=new Grid（）；
setDataProvider（…）；
ValueProvider cssClassProvider=（个人）->{
字符串cssClass=“我的网格单元”；
if（person.getAge（）=60）{
cssClass+=“高级”；
}
返回cssClass；
};
grid.addColumn（TemplateRenderer）。
属于（“[[item.age]]”）
.withProperty（“类”，cssClassProvider）
.withProperty（“年龄”，Person：：getAge））；
grid.addColumn（TemplateRenderer）。
的（“[[item.name]]”）
.withProperty（“类”，cssClassProvider）
.withProperty（“名称”，Person:：getName））；

然后，您可以根据CSS类设置网格单元格的背景（在

shared styles.html

中）：

.my-grid-cell.junior{
背景颜色：珊瑚；
}
.my-grid-cell.senior{
背景色：深色；
}

但是，对于Vaadin网格的默认Lumo主题样式，这看起来不太好。为了使网格看起来正常，您需要覆盖以下一些默认样式：

[部分=“单元”]{
最小高度：0；
}
[部分=“单元格]：：开槽（瓦丁网格单元格内容）{
填充：0；
}
.我的网格单元{
最小高度：计算值（var（-lumo-size-m）-2*var（-lumo-space xs））；
填充：var（--lumo-space xs）var（--lumo-space-m）；
}

谢谢你，维克多，今天晚些时候我会试试这个！我被你的帮助吓坏了，真是感激不尽！如果你感兴趣，我会付钱给你的瓦丁教练！

Grid<Person> grid = new Grid<>();
grid.setItems(people);

grid.addColumn(new ComponentRenderer<>(person -> {
    if (person.getGender() == Gender.MALE) {
        return new Icon(VaadinIcons.MALE);
    } else {
        return new Icon(VaadinIcons.FEMALE);
    }
})).setHeader("Gender");