[英]How to set the cell color dynamically in grid header by it's value
I am trying to dynamically
change the color
of header cells
我正在尝试dynamically
更改header cells
的color
The columns with header in grid
are generated dynamically too: grid
中带有 header 的列也是动态生成的:
for (Employee emp : employees) {
Grid.Column<Employee> empColumn = grid.addColumn(...).setHeader(emp.getNameWithEmpRelationship());
}
But I only know how to change the color
of whole header row
, not only for cell
但我只知道如何改变整个header row
的color
,而不仅仅是cell
My custom .css
file:我的自定义.css
文件:
:host(.header-change) [part~="header-cell"] {
background-color: #ececec;
color: black;
}
Then I added it into the grid
然后我将它添加到grid
中
grid.addClassName("header-change");
And result looks like:结果看起来像:
But I need to do something like this:但我需要做这样的事情:
for (Employee emp : employees) {
Grid.Column<Employee> empColumn = grid.addColumn(...).setHeader(emp.getNameWithEmpRelationship());
if(emp.getNameWithEmpRelationship().name().equals("CONTRACT") {
empColumn.addClassName("orange-cell");
}
if(emp.getNameWithEmpRelationship().name().equals("PART_TIME") {
empColumn.addClassName("green-cell");
}
if(emp.getNameWithEmpRelationship().name().equals("FULL_TIME") {
empColumn.addClassName("blue-cell");
}
}
.css
should looks like: .css
应该是这样的:
.orange-cell {
background-color: orange;
color: black;
}
.blue-cell {
background-color: blue;
color: black;
}
.green-cell {
background-color: green;
color: black;
}
And the result should looks like (I achieved the sample result by manually adjusting the value of the element through the browser):结果应该是这样的(我通过浏览器手动调整元素的值来实现示例结果):
How can I do this?我怎样才能做到这一点? Because my example is not working.因为我的例子不起作用。
I'm afraid the short answer is that you can't.恐怕简短的回答是你不能。 While you can apply css classnames, and thus styling, to body cells, using ClassNameGenerator, that does not work for header cells.虽然您可以使用 ClassNameGenerator 将 css 类名和样式应用于正文单元格,但这不适用于 header 单元格。
What you can do is use a component for the header cells' contents, using Column.setHeader(Component c);
您可以做的是使用Column.setHeader(Component c);
Then you can of course apply styling whichever way you like to that component.然后,您当然可以将样式以任何您喜欢的方式应用到该组件。
However, that component is not going to cover the entire space.但是,该组件不会覆盖整个空间。 While it's technically possible to make that happen with css, it's complicated, error prone, and not really supported.虽然在技术上可以使用 css 实现这一点,但它很复杂,容易出错,而且不受真正支持。
There's a feature request ticket for this here: https://github.com/vaadin/web-components/issues/1434 .这里有一个功能请求票: https://github.com/vaadin/web-components/issues/1434 。 You can vote for the feature by adding a thumbs-up reaction.您可以通过添加竖起大拇指来为该功能投票。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.