Vaadin流:网格条件背景色 [英] Vaadin flow: grid conditional background color

问题描述

我想根据条件给网格线着色. 我尝试这个:

Java:

gridEtudiant.setClassNameGenerator(t -> {
    if (t.getEtud_numero().startsWith("2")) {
        return "error_row";
    }
    return "";
});

Css:

td.error_row {
  background-color: red;
}

HTML

<td id="vaadin-grid-cell-1" tabindex="0" role="gridcell" part="cell body-cell" first-column="" reorder-status="undefined" aria-selected="false" class="error_row" style="width: 100px; flex-grow: 1; order: 10000000;"><slot name="vaadin-grid-cell-content-1"></slot></td>

我们可以看到'class ="error_row"'，但它不是红色.

Vaadin版本为13.0.1

解决方案

您的Java代码看起来不错.

确保您有一个webapp/frontend/styles/shared-styles.html这样的html文件，其中包含以下内容:

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
    <template>
        <style>
            [part~="cell"].error_row {
                background: red;
            }
        </style>
    </template>
</dom-module>

如果随后您的布局中包含用@HtmlImport("frontend://styles/shared-styles.html")注释的网格(由于已经应用了自定义css类，您似乎已经拥有了它)应该可以使用.

示例:

grid.addColumn(Customer::getFirstname).setHeader("Firstname");
grid.addColumn(Customer::getLastname).setHeader("Lastname");
grid.addColumn(Customer::getEmail).setHeader("Email");
grid.setClassNameGenerator(customer -> {
    if (customer.getFirstname().equals("Marco")) {
       return "error_row";
    } else {
       return "";
    }
});

成为:

I want to color grid lines, depending on a condition. I try this:

Java:

gridEtudiant.setClassNameGenerator(t -> {
    if (t.getEtud_numero().startsWith("2")) {
        return "error_row";
    }
    return "";
});

Css:

td.error_row {
  background-color: red;
}

HTML

<td id="vaadin-grid-cell-1" tabindex="0" role="gridcell" part="cell body-cell" first-column="" reorder-status="undefined" aria-selected="false" class="error_row" style="width: 100px; flex-grow: 1; order: 10000000;"><slot name="vaadin-grid-cell-content-1"></slot></td>

We can see the 'class="error_row"' but it's not colored in red.

Vaadin version is 13.0.1

解决方案

Your java code looks good.

Make sure you have a html file like webapp/frontend/styles/shared-styles.html containing something like:

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
    <template>
        <style>
            [part~="cell"].error_row {
                background: red;
            }
        </style>
    </template>
</dom-module>

If you then have your Layout containing the grid annotated with @HtmlImport("frontend://styles/shared-styles.html") (which you already seem to have as your custom css class is already applied) it should work.

Example:

grid.addColumn(Customer::getFirstname).setHeader("Firstname");
grid.addColumn(Customer::getLastname).setHeader("Lastname");
grid.addColumn(Customer::getEmail).setHeader("Email");
grid.setClassNameGenerator(customer -> {
    if (customer.getFirstname().equals("Marco")) {
       return "error_row";
    } else {
       return "";
    }
});

becomes:

这篇关于Vaadin流:网格条件背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！