Cómo configurar colspan y rowspan en JSF panelGrid?

Question

¿Cómo puedo configurar colspan y rowspan en JSF <h:panelGrid>?

Answer 1

Ninguno de los dos es posible con la implementación estándar de JSF. Hay 3 formas de arreglar esto:

1. Escriba el HTML simple usted mismo. Un <h:panelGrid> básicamente representa un HTML <table>. Hacer lo mismo.
2. Cree un renderizador HTML personalizado que admita esto. Sin embargo, será mucho sudor y dolor.
3. Utilice una biblioteca de componentes de terceros que admita esto.
   • Tomahawk tiene un componente <t:panelGroup> que soporta colspan en <h:panelGrid>.
   • RichFaces (sólo 3.x) tiene un componente <rich:column> que soporta tanto colspan y rowspan en <rich:dataTable>.
   • PrimeFaces tiene una <p:row> lado de <p:column> que se apoya tanto en <p:panelGrid> y <p:dataTable> (también con <p:columnGroup>).

Answer 2

Estoy de acuerdo con la respuesta de BalusC y quiero añadir, que la biblioteca de componentes Primefaces JSF2 también ofrece esta funcionalidad si utiliza su componente p:dataTable. Se llama agrupamiento allí.

Answer 3

asumen

a) un archivo de recursos mensaje con dos entradas:
key.row = </td> </tr> < tr> < td (ignorar espacios)
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> 

entonces, por ejemplo

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

imprime una tabla con 3 filas:

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

2) 3 en blanco celdas

3) un centro alineado de celdas, que tiene colspan 3 y que contiene un hello div ..

V.

Answer 4

uso: rica: la columna de colspan="2"RichFaces

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

Answer 5

desde el 24 de Enero de 2012 Primefaces también tiene la posibilidad de utilizar colspan y rowspan en el componente de panelGrid Primefaces. Ver:

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

Answer 6

No hay manera de definir lapso de columna en el panel de rejilla, pero si se usa con prudencia se puede hacer que suceda por apenas etiqueta llano. Un ejemplo que me gustaría mostrarte.

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

Tenga en cuenta que button5 se extiende por dos columnas, dado el tamaño que requiere.