如何根据 Vaadin 14 中的数据为网格的行或单元格着色

Question

假设我有一个 Grid<Person> 和一些 person.getStatus() 其中 returns 一个 Enum

enum Status {
SINGLE, MARRIED, DIVORCED
}

我想根据此枚举值为网格的列着色。

如何做到？

Answer 1

在 Vaadin 14 中

根据数据设置网格行的样式

首先，您需要为该行设置 CSS class 名称生成器。这会将 CSS class 名称添加到 Grid 创建的 td 元素中。生成器函数接收您的项目，如果您不想为某些行添加 class 名称，您应该 return 一个 CSS class 名称作为字符串或 null。多个 class 名称可以从生成器中 return 编辑为 space 分隔。

grid.setClassNameGenerator(person -> {
    if (person.getStatus() == Status.DIVORCED || person.getStatus() == Status.SINGLE) {
        return "my-style-1";
    } else {
        return "my-style-2";
    }
});

要根据 CSS class 名称更改样式，您需要为 Grid 创建主题。

在 frontend/styles 文件夹中添加 styles.css.

td.my-style-1 {
    background-color: black;
    color: hotpink;
}

td.my-style-2 {
    background-color: hotpink;
    color: black;
}

并将样式添加到您的应用中。

@Route
@CssImport(value = "./styles/styles.css", themeFor = "vaadin-grid")
public class MainView extends VerticalLayout {
// your code for grid
}

根据数据设置网格单元格的样式

CSS 样式导入和创建的方式与行样式相同，但使用的网格 API 不同。

对于单元格，您应该使用列 class 名称生成器：

grid.getColumnByKey("status").setClassNameGenerator(person -> {
    if (person.getStatus() == Status.SINGLE) {
        return "my-style-3";
    }
    return null;
});

如何根据 Vaadin 14 中的数据为网格的行或单元格着色

How to color a row or cell of a grid depending on it's data in Vaadin 14

java

vaadin

在 Vaadin 14 中

根据数据设置网格行的样式

根据数据设置网格单元格的样式