primefaces数据表行着色

Question

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

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

我在datatable中的代码是，

rowStyleClass="highlight";

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

.highlight {
    background: yellow  !important ;
}

Answer 1

你应该有两个不同颜色的类，并在rowStyleClass属性中使用内联if：

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

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

rowIndexVar="rowIndex"

这意味着偶数行将行样式类设置为'highlight1'和奇数行 - 'highlight2'

See here more info

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;
}