How to color a row or cell of a grid depending on it#39;s data in Vaadin 14(如何根据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中的数据为网格的行或单元格着色


基础教程推荐
- 多个组件的复杂布局 2022-01-01
- 在 Java 中创建日期的正确方法是什么? 2022-01-01
- Java 实例变量在两个语句中声明和初始化 2022-01-01
- 不推荐使用 Api 注释的描述 2022-01-01
- 大摇大摆的枚举 2022-01-01
- 验证是否调用了所有 getter 方法 2022-01-01
- Java Swing计时器未清除 2022-01-01
- 如何在 JFrame 中覆盖 windowsClosing 事件 2022-01-01
- 如何在 Spring @Value 注解中正确指定默认值? 2022-01-01
- 从 python 访问 JVM 2022-01-01