How can I set colspan
and rowspan
in JSF <h:panelGrid>
?
None of both is possible with the standard JSF implementation. There are 3 ways to fix this:
- Write plain HTML yourself. A
<h:panelGrid>
basically renders a HTML<table>
. Do the same. - Create a custom HTML renderer which supports this. It'll however be a lot of sweat and pain.
- Use a 3rd party component library which supports this.
- Tomahawk has a
<t:panelGroup>
component which supportscolspan
in<h:panelGrid>
. - RichFaces (3.x only) has a
<rich:column>
component which supports bothcolspan
androwspan
in<rich:dataTable>
. - PrimeFaces has a
<p:row>
next to<p:column>
which is supported in both<p:panelGrid>
and<p:dataTable>
(also with<p:columnGroup>
).
- Tomahawk has a
Since 24 januari 2012 Primefaces also has the possibility to use colspan and rowspan in the panelGrid component of Primefaces. See:
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.
Use: rich:column colspan="2"
of RichFaces
<rich:column colspan="2">
<h:outputText value="Ingrese el texto de la imagen" />
</rich:column>
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.
来源:https://stackoverflow.com/questions/3111081/how-to-set-colspan-and-rowspan-in-jsf-panelgrid