JSF 2 ui:repeat:将div中的每n个项目分组 [英] JSF 2 ui:repeat: group every n items inside a div

问题描述

给出一个我想在这样的页面上排列的收藏集:

Given a collection that I want to arrange on a page like this:

<!-- 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或其他技术(最好是 )中做到这一点?

Is there some sort of trick I can use to do this inside a ui:repeat or by some other technique, preferably other than creating a custom component?

推荐答案

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

You can check the current loop round by the varStatus attribute and print the intermediary </div><div style="float: left;"> whenever necessary.

例如每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实体.

Note that it's not possible to wrap this as plain HTML inside a <h:panelGroup>, because it would result in non-wellformed XML, hence the <h:outputText escape="false"> with them as XML entities.

更新，这是另一种方法，仅将<div>定义一次，这可能不那么令人困惑:

Update as per the comments, here's an alternate approach having the <div>s definied only once which is probably less confusing:

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

这篇关于JSF 2 ui:repeat:将div中的每n个项目分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！