如何在JSF panelGrid中设置colspan和rowspan？
如何在JSF <h:panelGrid>设置colspan和rowspan ？
在标准的JSF实现中，两者都是不可能的。 有三种方法可以解决这个问题：
- 自己写简单的HTML。 一个
<h:panelGrid>基本上呈现一个HTML<table>。 照着做。 - 创build一个支持这个的自定义HTML渲染器。 这将是很多的汗水和痛苦。
- 使用支持这个的第三方组件库。
- Tomahawk有一个支持
<h:panelGrid>colspan的<t:panelGroup>组件。 - RichFaces （仅限3.x）有一个
<rich:column>组件，它支持<rich:dataTable>colspan和rowspan。 - PrimeFaces在
<p:panelGrid>和<p:dataTable>（也包含<p:columnGroup>）中都支持<p:column><p:row>旁边的<p:columnGroup>。
- Tomahawk有一个支持
自2012年1月24日以来Primefaces也有可能在Primefaces的panelGrid组件中使用colspan和rowspan。 看到：
使用：rich：column colspan="2"的RichFaces
<rich:column colspan="2"> <h:outputText value="Ingrese el texto de la imagen" /> </rich:column>
承担
a）具有两个条目的消息资源文件：
key.row = </ td> </ tr> <tr> <td （忽略空格）
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>
那么，例如
<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>
打印一张3行的表格：
1）r1-c1，r1-c2，r1-c3
2）3个空白单元格
3）一个细胞alignment的中心，有colspan 3，包含一个hello div。
V.
我同意BalusC的答案，并希望补充说，如果使用p：dataTable组件，Primefaces JSF2组件库也提供了这个function。 这就是所谓的分组。
没有办法在面板网格中定义列跨度，但是如果明智地使用，只能使用纯标签来实现。 我想向你展示一个例子。
<h:panelGrid columns="1" > <h:panelGrid columns="2"> <h:commandButton image="resourceshttp://img.dovov.comRegular5.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=REGULAR"> </h:commandButton> <h:commandButton id="button2" image="resourceshttp://img.dovov.comCasual2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=CASUAL"> </h:commandButton> </h:panelGrid> <h:panelGrid columns="2"> <h:commandButton id="button3" image="resourceshttp://img.dovov.comInstant2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=INSTANT"> </h:commandButton> <h:commandButton id="button4" image="resourceshttp://img.dovov.comOutstation6.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION"> </h:commandButton> </h:panelGrid> <h:commandButton id="button5" image="resourceshttp://img.dovov.comShareMyCar.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION"> </h:commandButton>
请注意，按照所需的大小，button5跨越两列。
