primefaces 数据表行着色答案

【问题标题】：primefaces datatable row coloringprimefaces 数据表行着色
【发布时间】：2013-03-13 11:53:27
【问题描述】：

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

我正在使用 rowStyleClass 属性。但它不会改变颜色

我在数据表中的代码是，

rowStyleClass="highlight";

我的css文件是这样的，

.highlight {
    background: yellow  !important ;
}

【问题讨论】：

标签： primefaces

【解决方案1】：

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

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

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

rowIndexVar="rowIndex"

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

See here more info

【讨论】：

在你的 CSS 中实现 .ui-datatable-odd 和 .ui-datatable-even 样式类不是更容易吗，默认由 p:dataTable 实现？
您还应该提到，如果您使用主题，那么您还应该覆盖/定义“background-image:none;”在您的自定义 CSS 中

【解决方案2】：

最简单的方法是在 CSS 中实现 .ui-datatable-odd 和 .ui-datatable-even 样式类，默认情况下由 p:dataTable 实现。示例：

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

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

最终看起来像

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

您的回答与 12 个赞成的回答“相同”，只是您的选择器更具体。在这些情况下，您可以在答案中添加评论或在您声明有时需要这样做的地方提出编辑。（就像我现在编辑了答案一样）。干杯。

【解决方案4】：

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

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

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

【讨论】：