根据集合的元素使 bootstrap 手风琴重复

Question

我正在尝试根据本页最后一个示例制作 bootstrap 折叠（手风琴）。

http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp

现在在这个例子中，div 的数量是硬编码的，在这个例子中是 3 个。我想根据 JAVA Set .

中值的数量做同样的事情

据我所知，我正在尝试这样使用 ui:repeat

<ui:repeat value="#{myBean.apples}" var="apples">
</ui:repeat>

其中 apples 是一组（唯一列表）整数。

完整代码如下：

                        <h:panelGroup layout="block"
                            rendered="#{researcherQueriesDetailBean.offerPersonDTO.size() > 0}">

                            <div class="panel-group" id="accordion" role="tablist"
                                aria-multiselectable="true">

                                <ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
                                    var="offerMakers">


                                    <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="headingOne">
                                            <h4 class="panel-title">



                                                <a role="button" data-toggle="collapse"
                                                    data-parent="#accordion" href="#sample-list"
                                                    aria-expanded="false" aria-controls="sample-list">
                                                    Sample Availability </a>


                                            </h4>
                                        </div>


                                        <div id="sample-list" class="panel-collapse collapse"
                                            role="tabpanel" aria-labelledby="headingOne">
                                            <div class="panel-body"></div>
                                        </div>
                                    </div>
                                </ui:repeat>

                            </div>
                        </h:panelGroup>

我在代码中放置 ui:repeat 时遇到问题，以便手风琴面板根据 set.Is 中元素的数量重复，甚至可以这样做吗？在这种情况下，任何代码参考都会有所帮助。

谢谢。

Answer 1

根据您的代码：

<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
           var="offerMaker">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse"
                   data-parent="#accordion" href="#sample-list"
                   aria-expanded="false" aria-controls="sample-list">
                    Sample Availability </a>
            </h4>
        </div>
        <div id="sample-list" class="panel-collapse collapse"
             role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body"></div>
        </div>
    </div>
</ui:repeat>

你正在对 offerMakers 进行迭代，但当你说要对一组 Integers 进行迭代时，我没有看到你将这些对象用于任何事情，但我不认为你了解集合的行为方式。

无论如何，如果您使用此代码进行迭代，您将只会得到一次迭代，将您 <ui:repeat 更改为以下内容，您就会明白我的意思：

<ui:repeat value="#{researcherQueriesDetailBean.offerMakers}"
           var="offerMaker">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse"
                   data-parent="#accordion" href="#sample-list"
                   aria-expanded="false" aria-controls="sample-list">

                      OFFERMAKER VALUE IS: #{offerMaker}
                </a>
            </h4>
        </div>
        <div id="sample-list" class="panel-collapse collapse"
             role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body"></div>
        </div>
    </div>
</ui:repeat>

如果您想根据元素的数量（大小）创建动态手风琴 Set 那么您可能需要这样的东西：

<c:forEach begin="0" end="#{researcherQueriesDetailBean.offerMakersSize}" var="i">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading#{i}">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse"
                   data-parent="#accordion" href="#hh#{i}"
                   aria-expanded="false" aria-controls="sample-list">
                    Collapsible group #{i}
                </a>
            </h4>
        </div>
        <div id="hh#{i}" class="panel-collapse collapse"
             role="tabpanel" aria-labelledby="heading#{i}">
            <div class="panel-body">some info #{i}</div>
        </div>
    </div>
</c:forEach>

您的 ResearcherQueriesDetailBean 将采用以下方法：

public Integer getOfferMakersSize(){
    return offerMakers.size();
}

根据集合的元素使 bootstrap 手风琴重复

Making bootstrap accordion repeat based on elements of a set

jsf

hashset

uirepeat