columnclasses - ¿Cómo establecer colspan y rowspan en JSF panelGrid?

panelgrid primefaces colspan

Question

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

Answer 1

Desde el 24 de enero de 2012 Primefaces también tiene la posibilidad de usar colspan y rowspan en el componente panelGrid de Primefaces. Ver:

<p:panelGrid>

Answer 2

Estoy de acuerdo con la respuesta de BalusC y quiero agregar que la biblioteca de componentes Primefaces JSF2 también ofrece esta funcionalidad si usa su componente <p:dataTable> . Se llama agrupamiento allí.

Answer 3

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

1. Escribe HTML simple por ti mismo. A <h:panelGrid> básicamente representa un HTML <table> . Hacer lo mismo.
2. Crea un renderizador HTML personalizado que admita esto. Sin embargo, será mucho sudor y dolor.
3. Use una biblioteca de componentes de terceros que sea compatible con esto.
   • Tomahawk tiene un componente <t:panelGroup> que admite colspan en <h:panelGrid> .
   • RichFaces (solo 3.x) tiene un componente <rich:column> que admite tanto colspan como rowspan en <rich:dataTable> .
   • PrimeFaces tiene un <p:row> lado de <p:column> que es compatible con <p:panelGrid> y <p:dataTable> (también con <p:columnGroup> ).

Answer 4

No hay forma de definir el intervalo de columnas en la cuadrícula del panel, pero si se usa con prudencia, puede hacerlo solo con una etiqueta simple. 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 abarca dos columnas dado el tamaño que requiere.

Answer 5

Uso: rich: column colspan="2" de RichFaces

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

Answer 6

asumir

a) un archivo de recursos de 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 celdas en blanco

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

V.