JSF 2 ui：repeat：對div中的每n個項進行分組

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中執行此操作：重復或通過其他技術， 最好不要創建自定義組件？

Answer 1

您可以通過varStatus屬性檢查當前循環，並在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>

請注意，不可能將此包裝為<h:panelGroup>純HTML，因為它會導致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>

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>

編輯：第二個版本已被替換