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

Question

我正在使用 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>

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

我已经看到了这个示例，它基于条件而不是行以编程方式设置列的样式..

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

Answer 1

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

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

Grid<Person> grid = new Grid<>();
grid.setDataProvider(...);

ValueProvider<Person, String> 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.<Person>
        of("<div class$=\"[[item.class]]\">[[item.age]]</div>")
            .withProperty("class", cssClassProvider)
            .withProperty("age", Person::getAge));
grid.addColumn(TemplateRenderer.<Person>
        of("<div class$=\"[[item.class]]\">[[item.name]]</div>")
            .withProperty("class", cssClassProvider)
            .withProperty("name", Person::getName));

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

<custom-style>
  <style>
    .my-grid-cell.junior {
      background-color: coral;
    }

    .my-grid-cell.senior {
      background-color: darkmagenta;
    }
  </style>
</custom-style>

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

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
  <template>
    <style>
      [part~="cell"] {
        min-height: 0;
      }

      [part~="cell"] ::slotted(vaadin-grid-cell-content) {
        padding: 0;
      }
    </style>
  </template>
</dom-module>

<custom-style>
  <style>  
    .my-grid-cell {
      min-height: calc(var(--lumo-size-m) - 2 * var(--lumo-space-xs));
      padding: var(--lumo-space-xs) var(--lumo-space-m);
    }
  </style>
</custom-style>