本文介紹了如何根據(jù)Vaadin14中的數(shù)據(jù)為網(wǎng)格的行或單元格著色的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學(xué)習吧！
問題描述
假設(shè)我有一個Grid<Person>和一些返回枚舉的person.getStatus()
enum Status {
SINGLE, MARRIED, DIVORCED
}
我想根據(jù)此枚舉的值為網(wǎng)格的列著色。
如何才能做到這一點？
推薦答案
在Vaadin14中
基于數(shù)據(jù)設(shè)置網(wǎng)格行的樣式
首先，您需要為該行設(shè)置CSS類名稱生成器。這會將CSS類名稱添加到Grid創(chuàng)建的TD元素中。生成器函數(shù)接收您的項，您應(yīng)該以字符串形式返回CSS類名稱，如果不想為某些行添加類名稱，則返回NULL。可以以空格分隔的形式從生成器返回多個類名。
grid.setClassNameGenerator(person -> {
if (person.getStatus() == Status.DIVORCED || person.getStatus() == Status.SINGLE) {
return "my-style-1";
} else {
return "my-style-2";
}
});
若要基于CSS類名稱更改樣式，您需要為網(wǎng)格創(chuàng)建主題。
在frontend/styles文件夾中添加styles.css。
td.my-style-1 {
background-color: black;
color: hotpink;
}
td.my-style-2 {
background-color: hotpink;
color: black;
}
并將樣式包含到您的應(yīng)用程序中。
@Route
@CssImport(value = "./styles/styles.css", themeFor = "vaadin-grid")
public class MainView extends VerticalLayout {
// your code for grid
}
基于數(shù)據(jù)設(shè)置網(wǎng)格單元格樣式
CSS樣式導(dǎo)入和創(chuàng)建的方式與行樣式相同，但使用的網(wǎng)格API不同。
對于單元格，您應(yīng)該使用列類名生成器：
grid.getColumnByKey("status").setClassNameGenerator(person -> {
if (person.getStatus() == Status.SINGLE) {
return "my-style-3";
}
return null;
});
這篇關(guān)于如何根據(jù)Vaadin14中的數(shù)據(jù)為網(wǎng)格的行或單元格著色的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，
