问题
How can I set colspan
and rowspan
in JSF <h:panelGrid>
?
回答1:
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 supports
colspan
in<h:panelGrid>
. - RichFaces (3.x only) has a <rich:column> component which supports both
colspan
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 <t:panelGroup> component which supports
回答2:
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
回答3:
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.
回答4:
Use: rich:column colspan="2"
of RichFaces
<rich:column colspan="2">
<h:outputText value="Ingrese el texto de la imagen" />
</rich:column>
回答5:
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.
回答6:
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