primefaces - primefaces 数据表行着色

Question

我想用不同的颜色显示数据表行。

我正在使用 rowStyleClass 属性。但它并没有改变颜色

我在数据表中的代码是，

rowStyleClass="highlight";

我的css文件看起来像这样，

.highlight {
    background: yellow  !important ;
}

Answer 1

你应该有两个不同颜色的类，并在 rowStyleClass 属性中使用 inline 如果：

rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}" 

您应该在数据表 rowIndexVar 属性中设置“rowIndex”

rowIndexVar="rowIndex"

这意味着偶数行的行样式类设置为“highlight1”，奇数行 - “highlight2”

在这里查看更多信息

Answer 2

最简单的方法是在你的 CSS 中实现.ui-datatable-odd和.ui-datatable-even样式化类，这是p:dataTable默认实现的。例子：

.ui-datatable-odd {
    background: #ffffff;
}

.ui-datatable-even {
    background: #F2F5F9;
}

最终看起来像

可能是您需要使用更具体的选择器，请阅读有关 css 的特殊性

Answer 3

试试这个......它在我的情况下工作

.ui-widget-content .ui-datatable-even{
    background: #F2F5F9;
}

.ui-widget-content .ui-datatable-odd{
    background: red;
}

Answer 4

都铎的答案是正确的方式。如果您使用 treeTable ，您可以这样做：

.ui-treetable tbody tr:nth-child(odd) {
    background-color: #edf2f6 !important;
}

.ui-treetable tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}