如何在表格中显示的每三行中插入一个空行（ui：repeat）

Question

我有一个超过50行的引导表，我想要实现的是 一个空行，它将在显示的每三行中充当一个分隔符。

这是我的xhtml代码。

<tbody>
    <ui:repeat var="person" value="#{myBean.listOfPersons}">
        <tr>
            <td><h:outputText value="#{person.firstName}"/> </td>
            <td><h:outputText value="#{person.lastName}"/> </td>
            <td><h:outputText value="#{person.age}"/> </td>
        </tr>
    </ui:repeat>
</tbody>

谢谢！

Answer 1

尝试以下代码：

<tbody>
    <ui:repeat var="person" value="#{myBean.listOfPersons}" varStatus="status">
        <tr>
            <td><h:outputText value="#{person.firstName}"/> </td>
            <td><h:outputText value="#{person.lastName}"/> </td>
            <td><h:outputText value="#{person.age}"/> </td>
        </tr>

        <ui:fragment rendered="#{(status.index + 1) % 3 eq 0}">
            <tr style="height:30px;">
                <td colspan="3"></td>
            </tr>
        </ui:fragment>

    </ui:repeat>
</tbody>    

  

使用varStatus属性获取迭代索引#{status.index}。

     

rendered属性确定是否呈现组件。