JSF UI 2：重复：组一个div内的每个n项(JSF 2 ui:repeat: group ev

鉴于我想这样的一个页面上安排一个集合：

<!-- 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中：重复或通过一些其他的技术， 最好比创建一个自定义组件等？

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> ，因为它会导致非简洁（wellformed）XML，因此<h:outputText escape="false">与他们的XML实体。

---

更新按照评价，这里是具有一个替代方法中<div>小号definied只有一次这可能是不易混淆：

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

Answer 2:

如果可能的话我会打破集合在服务器端：

<ui:repeat value="#{groups}" var="group">
  <div style="float:left;">
    <ui:repeat value="#{group.items}" var="item">
      <div>#{item.content}</div>
    </ui:repeat>
  </div>
</ui:repeat>

另一种选择可能（没有测试，不知道在特定大小的行为）：

<ui:repeat value="#{items}" var="group" varStatus="status" step="n">
  <div style="float:left;">
    <ui:repeat value="#{items}" var="item" offset="#{status.index}" size="#{status.index + n}">
      <div>#{item.content}</div>
    </ui:repeat>
  </div>
</ui:repeat>

编辑：第二个版本已被取代

文章来源: JSF 2 ui:repeat: group every n items inside a div