java - JSF 2 用户界面 :repeat: group every n items inside a div

Question

给定一个集合，我想在这样的页面上排列:

<!-- Group 0 -->
<div style="float:left;">
    <div><!-- Item 0 --></div>
    <div><!-- Item 1 --></div>

    <!-- ... -->

    <div><! -- Item n - 1 --></div>
</div>
<!-- Group 1 -->
<div style="float:left;">
    <div><!-- Item n     --></div>
    <div><!-- Item n + 1 --></div>

    <!-- ... -->

    <div><! -- Item 2n - 1 --></div>
</div>

<!-- ... -->

<!-- Group g -->
    <div><!-- Item gn     --></div>
    <div><!-- Item gn + 1 --></div>

    <!-- ... -->

    <div><! -- Item (g + 1)n - 1 --></div>
</div>

除了创建自定义组件之外，我可以使用某种技巧在 ui:repeat 或其他技术中执行此操作吗？最好是？

Answer 1

您可以通过 varStatus 查看当前循环属性并打印中介 </div><div style="float: left;">必要时。

例如每 3 项:

<div style="float: left;">
    <ui:repeat value="#{bean.list}" var="item" varStatus="loop">
        <h:outputText value="&lt;/div&gt;&lt;div style='float: left;'&gt;" escape="false" rendered="#{not loop.first and loop.index % 3 == 0}" />
        <div>#{item}</div>
    </ui:repeat>
</div>

请注意，不可能将其作为纯 HTML 包装在 <h:panelGroup> 中，因为它会导致格式不正确的 XML，因此 <h:outputText escape="false">将它们作为 XML 实体。

---

更新 根据评论，这里有一个替代方法有 <div> s 只定义一次，这可能不那么令人困惑:

<ui:repeat value="#{bean.list}" var="item" varStatus="loop">
    <h:outputText value="&lt;div style='float: left;'&gt;" escape="false" rendered="#{loop.index % 3 == 0}" />
    <div>#{item}</div>
    <h:outputText value="&lt;/div&gt;" escape="false" rendered="#{loop.last or (loop.index + 1) % 3 == 0}" />
</ui:repeat>