Выполнение бутстрапового аккордеона повторения на основе элементов набора

Question

Я пытаюсь сделать коллапс бутстрапа (аккордеон) в соответствии с последним примером на этой странице.

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

В настоящее время в этом примере, число дивы жестко заданы, 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> 

Если вы хотите создать динамичные аккордеоны в зависимости от количества элементов (размер) в вас 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(); 
}