jsf-2 - jsf2 ui:repeat alternate row color

Question

Using varStatus of ui:repeat is helpful to identify the odd and even rows if I display all the records in the list that is mapped to ui:repeat.

However, how do I handle a situation if I choose to display only specific records in the arraylist mapped to ui:repeat ? i.e. say for example that I display a table of students who have only scored more than 75% but my list that is mapped to ui:repeat contains the entire list of students. In this case, alternate row coloring does not work as some times consecutive rows have the same row color assigned to them. Is there an efficient workaround for this ?

Is there a similar feature like rowClasses that h:dataTable uses for ui:repeat?

Answer 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>

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