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

问题描述

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

I am using a Vaadin grid to display incoming information and update it in realtime. I have been able to style all of the rows by accessing the DOM like so:

<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 中执行此操作。非常感谢你！

What I am trying to do is set specific styling to certain rows based on the contents of the data of the row. Basically I have a column of booleans and if it's true, I want the row to have a green background, and if it's false I want that row to have a red background. Now sure how I would do this in my Java code or my shared-styles.html. Thank you so much!

我看过这个例子是基于条件以编程方式设置列，但不是一行...

I have seen this example for programatically styling a column based on a condition, but not a row..

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

推荐答案

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

As of now (Vaadin 10, vaadin-grid 5) there is no API for adding custom attributes/classes to individual rows in a grid. It is possible to implement this use case in your application code, but the implementation might be not very efficient.

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

One approach would be defining a custom renderer for each column of the grid to wrap each cell contents in an extra div, and add classes / attributes to the wrappers. You can use a TemplateRenderer to minimize the memory / performance impact of these wrappers:

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类设置网格单元格的背景（在<$ c中） $ c> shared-styles.html ）：

And then you can set the background of the grid cells based on the CSS class (in 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主题样式，这看起来不太好。为了让您的网格看起来没问题，您需要覆盖其中一些默认样式：

However, that would not look great with the default Lumo theme styles for the Vaadin Grid. In order to make your grid look OK you'll need to override some of these default styles:

<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>

这篇关于基于内容的Vaadin 10网格样式个别行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！