How to set colspan and rowspan in JSF panelGrid?

佐手、 提交于 2019-11-28 06:08:25

None of both is possible with the standard JSF implementation. There are 3 ways to fix this:

  1. Write plain HTML yourself. A <h:panelGrid> basically renders a HTML <table>. Do the same.
  2. Create a custom HTML renderer which supports this. It'll however be a lot of sweat and pain.
  3. Use a 3rd party component library which supports this.
Renso Lohuis

Since 24 januari 2012 Primefaces also has the possibility to use colspan and rowspan in the panelGrid component of Primefaces. See:

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

assume

a) a message resource file with two entries:
key.row=< /td>< /tr>< tr>< td (ignore spaces)
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>

then, for example

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


prints a table with 3 rows:

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

2) 3 blank cells

3) a cell aligned center, having colspan 3 and containing a hello div..

V.

dmotta

Use: rich:column colspan="2" of RichFaces

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

I agree with BalusC's answer and want to add, that the Primefaces JSF2 component library also offers this functionality if you use its p:dataTable component. It is called grouping there.

There is no way to define column span in panel grid but if used wisely you can make it happen by just plain tag only. One example I would like to show you.

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!