根据一组元素重复制作自举手风琴

Question

根据本页最后一个示例，我试图使自举折叠（手风琴）。

​​

现在，在本例中，div的数量是硬编码，3在这种情况下。 我想根据JAVA Set中的值的数量进行设置。

从我的知识，我想使用的用户界面：重复这样

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

，其中苹果是一个整数集（唯一列表）。

下面是完整的代码：

     <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遇到问题：重复的代码，以便手风琴面板根据元素在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> 

如果你想创建DINAMIC手风琴这取决于你的元素（大小）的量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将有以下甲基OD：

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