6

次のようなページに配置したいコレクションがあるとします。

<!-- 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 内でこれを行うために使用できる何らかのトリックはありますか、できればカスタム コンポーネントを作成する以外の方法はありますか?

4

2 に答える 2

8

属性によって現在のループ ラウンドを確認し、必要に応じ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>ください<h:outputText escape="false">。

コメントに従って更新<div>してください。これは、 s を1回だけ定義する代替アプローチであり、おそらく混乱が少ないです。

<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>
于 2012-05-07T12:13:15.867 に答える
3

可能であれば、サーバー側でコレクションを中断します。

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

編集: 2 番目のバージョンが置き換えられました

于 2012-05-07T12:17:50.950 に答える