基于内容的Vaadin 10网格样式个别行

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

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

我想要做的是根据行数据的内容为特定行设置特定样式。 基本上我有一列布尔值，如果它是真的，我希望行有一个绿色背景，如果它是假的，我希望该行有一个红色背景。 现在确定我将如何在我的Java代码或我的shared-styles.html执行此shared-styles.html 。 非常感谢！

我已经看到这个示例用于基于条件以编程方式设置列，但不是行。

 Grid 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"); 

Answer 1

截至目前（Vaadin 10，vaadin-grid 5），没有用于向网格中的各个行添加自定义属性/类的API。 可以在应用程序代码中实现此用例，但实现可能效率不高。

一种方法是为网格的每一列定义一个自定义渲染器，以将每个单元格内容包装在一个额外的div中，并将类/属性添加到包装器中。 您可以使用TemplateRenderer来最小化这些包装器对内存/性能的影响：

 Grid grid = new Grid<>(); grid.setDataProvider(...); ValueProvider cssClassProvider = (person) -> { String cssClass = "my-grid-cell"; if (person.getAge() <= 16) { cssClass += " junior"; } else if (person.getAge() >= 60) { cssClass += " senior"; } return cssClass; }; grid.addColumn(TemplateRenderer. of("
[[item.age]]
") .withProperty("class", cssClassProvider) .withProperty("age", Person::getAge)); grid.addColumn(TemplateRenderer. of("
[[item.name]]
") .withProperty("class", cssClassProvider) .withProperty("name", Person::getName)); 

然后，您可以根据CSS类（在shared-styles.html ）设置网格单元格的背景：

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