Come impostare colspan e rowspan in JSF panelGrid?

Question

Come posso impostare colspan e rowspan in JSF <h:panelGrid>?

Answer 1

Nessuno di entrambi è possibile con l'implementazione JSF standard. Ci sono 3 modi per risolvere questo problema:

1. Scrivi da solo HTML. Un <h:panelGrid> riproduce fondamentalmente un codice HTML <table>. Fai lo stesso.
2. Creare un renderer HTML personalizzato che supporti questo. Sarà comunque molto sudore e dolore.
3. Utilizzare una libreria di componenti di terze parti che supporta questo.
   • Tomahawk ha un componente che sostiene <t:panelGroup>colspan in <h:panelGrid>.
   • RichFaces (3.x solo) ha un componente <rich:column> che supporta sia colspan sia rowspan in <rich:dataTable>.
   • PrimeFaces ha una <p:row> accanto <p:column> che è supportato sia <p:panelGrid> e <p:dataTable> (anche con <p:columnGroup>).

Answer 2

Sono d'accordo con la risposta di BalusC e voglio aggiungere, che la libreria dei componenti primefaces JSF2 offre anche questa funzionalità se si utilizza la sua componente p:dataTable. Si chiama raggruppare lì.

Answer 3

assumere

a) un file di risorse messaggio con due voci:
key.row = </td> </tr> < tr> < td (ignorare gli spazi)
key.gt = >

b) row.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> 

quindi, ad esempio

<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> 
</h:panelGroup> 

stampa una tabella con 3 righe:

1) r1-c1, r1-c2, r1-c3

2) 3 vuoto celle

3) un centro allineato cella, con colspan 3 e contenente un ciao div ..

V.

Answer 4

Usa: ricco: colonna colspan="2" di RichFaces

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

Answer 5

Dal 24 Gennaio 2012 primefaces ha anche la possibilità di utilizzare colspan e rowspan nella componente panelGrid di primefaces. Vedi:

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

Answer 6

Non v'è alcun modo per definire arco colonna nella griglia del pannello, ma se usato con saggezza si può farlo accadere da appena tag pianura. Un esempio che vorrei mostrarti.

<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> 

Notare che button5 campate due colonne date le dimensioni che richiede.