Bagaimana cara mengatur colspan dan rowpan di panelGrid JSF?

Tak satu pun dari keduanya mungkin dilakukan dengan implementasi JSF standar. Ada 3 cara untuk memperbaikinya:

1. Tulis sendiri HTML biasa. A <h:panelGrid> pada dasarnya merender HTML <table>. Lakukan yang sama.
2. Buat penyaji HTML khusus yang mendukung ini. Namun itu akan mengeluarkan banyak keringat dan rasa sakit.
3. Use a 3rd party component library which supports this.
   • Tomahawk has a <t:panelGroup> component which supports colspan in <h:panelGrid>.
   • RichFaces (hanya 3.x) memiliki <rich:column> yang mendukung colspan dan rowspan di <rich:dataTable>.
   • PrimeFaces memiliki <p:row> di samping <p:column> yang didukung di <p:panelGrid> dan <p:dataTable> (juga dengan <p:columnGroup>).

Sejak 24 Januari 2012 Primefaces juga memiliki kemungkinan untuk menggunakan colspan dan rowpan di komponen panelGrid Primefaces. Melihat:

http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml

Gunakan: rich:column colspan="2" dari RichFaces

<rich:column colspan="2">                        
<h:outputText  value="Ingrese el texto de la imagen" /> 
</rich:column>  

Menganggap

1. #P2#

   #P3#

2. baris.xhtml

   <ui:composition 
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:c="http://java.sun.com/jsp/jstl/core" >
   
       <c:forEach begin="0" end="#{colspan-2}">
           <h:panelGroup />
       </c:forEach>
   
       <h:panelGroup>
         <h:outputText value="#{i18n['key.row']}" escape="false" />
         <h:outputText value=" colspan='#{colspan}' #{cellAttributes}" />
         <h:outputText value="#{i18n['key.gt']}" escape="false" />
   
         <ui:insert />
       </h:panelGroup>
   
   </ui:composition>
   

   lalu, misalnya

   <h:panelGrid columns="3">
     <h:outputText value="r1-c1" />
     <h:outputText value="r1-c2" />
     <h:outputText value="r1-c3" />
   
     <ui:decorate template="/row.xhtml">
       <ui:param name="colspan" value="3" />
       <ui:param name="cellAttributes" value=" align='center'" />
   
       <div>Hello!!!!!</div>
     </ui:decorate>
   

Mencetak tabel dengan 3 baris:

1. r1-c1, r1-c2 , r1-c3

2. 3 sel kosong

3. sel sejajar tengah, memiliki colspan 3 dan berisi div hello.

Saya setuju dengan jawaban BalusC dan ingin menambahkan, bahwa pustaka komponen Primefaces JSF2 juga menawarkan fungsi ini jika Anda menggunakan p:dataTable. Disebut pengelompokan di sana.

Tidak ada cara untuk menentukan rentang kolom di panel grid tetapi jika digunakan dengan bijak Anda dapat mewujudkannya hanya dengan tag biasa saja. Salah satu contoh yang ingin saya tunjukkan kepada Anda.

<h:panelGrid columns="1" >
<h:panelGrid columns="2">
    <h:commandButton image="resources/images/Regular5.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=REGULAR">
    </h:commandButton>
    <h:commandButton id="button2" image="resources/images/Casual2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=CASUAL">
    </h:commandButton>
</h:panelGrid>
<h:panelGrid columns="2">
    <h:commandButton id="button3" image="resources/images/Instant2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=INSTANT">
    </h:commandButton>
    <h:commandButton id="button4" image="resources/images/Outstation6.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION">
    </h:commandButton> 
</h:panelGrid>
<h:commandButton id="button5" image="resources/images/ShareMyCar.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION">
</h:commandButton>

Please note that button5 spans two columns given the size it requires.