本文介紹了如何根據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中的數據為網格的行或單元格著色的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，
