根據一組元素重複製作自舉手風琴

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(); 
}