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

How to color a row or cell of a grid depending on it#39;s data in Vaadin 14(如何根据Vaadin14中的数据为网格的行或单元格着色)

本文介绍了如何根据Vaadin14中的数据为网格的行或单元格着色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设我有一个Grid<Person>和一些返回枚举的person.getStatus()

enum Status {
SINGLE, MARRIED, DIVORCED
}

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

如何才能做到这一点?

推荐答案

在Vaadin14中

基于数据设置网格行的样式

首先,您需要为该行设置CSS类名称生成器。这会将CSS类名称添加到Grid创建的TD元素中。生成器函数接收您的项,您应该以字符串形式返回CSS类名称,如果不想为某些行添加类名称,则返回NULL。可以以空格分隔的形式从生成器返回多个类名。

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

若要基于CSS类名称更改样式,您需要为网格创建主题。

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不同。

对于单元格,您应该使用列类名生成器:

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

这篇关于如何根据Vaadin14中的数据为网格的行或单元格着色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何根据Vaadin14中的数据为网格的行或单元格着色

基础教程推荐