JSF2 또는 primefaces p : 아이콘으로 스타일을 지정하는 selectManyCheckbox

Question

아이콘이있는 manycheckbox 스타일의 질문 하나?

<p:selectManyCheckbox value="#{Step4Bean.selectedItems}" id="tag-list" > 
         <f:selectItems value="#{Step4Bean.allItems}" var="item" itemLabel="#{item}" itemValue="#{item}"/> 
        </p:selectManyCheckbox> 

6 개의 항목이있는 체크 박스가 있습니다. 각 행의 항목이 3 개인 2 개의 행이 있어야합니다. 각 항목 근처에는 하나의 아이콘이 있어야합니다. 어떻게 해결할 수 있습니까? 여기

http://jpeg.am/images/?i=5692b9db7ea1d060bc7c97bcc788d6b8.jpg

Answer 1

PF 이미 컴퍼넌트의 그리드 레이아웃을 가진 출력 예를 들어, 링크이다.

<h3>Grid Layout</h3> 
<p:selectManyCheckbox id="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="3"> 
    <f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" /> 
</p:selectManyCheckbox> 

그러나 최신 PF 5.2.3 및 5.3-SNAPSHOT이 있습니다 사용자 정의 레이아웃 옵션

<h3>Custom Layout (since v5.2.3)</h3> 
<p:outputPanel id="customPanel" style="margin-bottom:20px"> 
    <p:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom"> 
     <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> 
     <f:selectItem itemLabel="PS4" itemValue="PS4" /> 
     <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> 
    </p:selectManyCheckbox> 

    <div class="ui-grid ui-grid-responsive"> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-4"> 
       <p:checkbox id="opt1" for="custom" itemIndex="0" /> 
      </div> 
      <div class="ui-grid-col-4"> 
       <p:checkbox id="opt2" for="custom" itemIndex="1" /> 
      </div> 
      <div class="ui-grid-col-4"> 
       <p:checkbox id="opt3" for="custom" itemIndex="2" /> 
      </div> 
     </div> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-4"> 
       <h:outputLabel for="opt1" value="Xbox One" /> 
      </div> 
      <div class="ui-grid-col-4"> 
       <h:outputLabel for="opt2" value="PS4" /> 
      </div> 
      <div class="ui-grid-col-4"> 
       <h:outputLabel for="opt3" value="Wii U" /> 
      </div> 
     </div> 
    </div> 
</p:outputPanel> 

확실하지

방법 및 최신 functionaly는 <f:selectItems/> 또는 단지 여러 <f:selectItem/> 사용할 수 있습니다 경우. 또한 후자의

참조 의심 :이 - http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml

참조