Wie kann ich in JSF <h:panelGrid>
colspan
und rowspan
einstellen?
Mit der Standard-JSF-Implementierung ist keines von beiden möglich. Es gibt drei Möglichkeiten, dies zu beheben:
<h:panelGrid>
gibt grundsätzlich einen HTML <table>
wieder. Das Gleiche tun.<t:panelGroup>
Komponente, die colspan
in <h:panelGrid>
unterstützt.<rich:column>
Komponente, die sowohl colspan
als auch rowspan
in <rich:dataTable>
unterstützt.<p:row>
neben <p:column>
, der in <p:panelGrid>
und <p:dataTable>
(auch mit <p:columnGroup>
) unterstützt wird.Seit dem 24. Januar 2012 hat Primefaces auch die Möglichkeit, Colspan und Rowspan in der Komponente panelGrid von Primefaces zu verwenden. Sehen:
Verwenden Sie: rich: column colspan="2"
von RichFaces
<rich:column colspan="2">
<h:outputText value="Ingrese el texto de la imagen" />
</rich:column>
annehmen
a) eine Nachrichtenressourcendatei mit zwei Einträgen:
key.row =</ td> </ tr> <tr> <td (Leerzeichen ignorieren)
key.gt =>
b) Zeile.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>
dann zum beispiel
<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>
druckt eine Tabelle mit 3 Zeilen:
1) r1-c1, r1-c2, r1-c3
2) 3 leere Zellen
3) ein zellausgerichtetes Zentrum mit Colspan 3 und einem Hallo-Div.
V.
Ich stimme mit der Antwort von BalusC überein und möchte hinzufügen, dass die Komponentenbibliothek Primefaces JSF2 diese Funktionalität auch bietet, wenn Sie ihre p: dataTable - Komponente verwenden. Man nennt es dort Gruppierung.
Es gibt keine Möglichkeit, die Spaltenspanne im Panel-Raster zu definieren. Wenn Sie sie jedoch sinnvoll einsetzen, können Sie dies nur durch einfaches Tag realisieren. Ein Beispiel möchte ich Ihnen zeigen.
<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>
Bitte beachten Sie, dass button5 bei der benötigten Größe zwei Spalten umfasst.