【问题标题】：jsf2 ui:repeat alternate row colorjsf2 ui：重复交替行颜色
【发布时间】：2013-05-12 02:34:56
【问题描述】：

如果我显示映射到 ui:repeat 的列表中的所有记录，则使用 ui:repeat 的 varStatus 有助于识别奇数行和偶数行。

但是，如果我选择仅显示映射到 ui:repeat 的 arraylist 中的特定记录，我该如何处理？例如，假设我显示了一个学生的表格，他们的得分仅超过 75%，但映射到 ui:repeat 的列表包含整个学生列表。在这种情况下，交替行着色不起作用，因为有时连续行具有相同的行颜色分配给它们。有没有有效的解决方法？

是否有类似于 h:dataTable 用于 ui:repeat 的 rowClasses 的类似功能？

【问题讨论】：

标签： jsf-2 uirepeat

【解决方案1】：

您可以通过使用 css 条件来做到这一点：

        <style type="text/css">
            .test1{
                display:none;
            }
            .test2{
                display:block;
            }
        </style>
        <ui:repeat value="#{tabview.students}" var="dt">
            <div class="#{(dt.scored  gt 75) ?'test1':'test2'}">#{dt.model}</div>
        </ui:repeat>

【讨论】：

【解决方案2】：

对于奇数/偶数，您可以使用 varStatus

<ui:repeat var="item" value="#{myBean.myList}" varStatus="status">
    <div class="some-class ${status.even ? 'row-even' : 'row-odd'}"> ... </div>
</ui:repeat>

CSS

.row-even {
  background-color: floralwhite;
}

.row-odd {
  background-color: gainsboro;
}

【讨论】：

更容易使用的是第 n 个子选择器。无需添加类