CSS

Question

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

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

是否有类似于rowClasses的功能，h：dataTable用于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

对于Odd / Even，您可以使用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;
}

jsf2 ui：重复交替行颜色

2 个答案:

CSS