如何在JSF panelGrid中設置colspan和rowspan？

Question

如何在JSF <h:panelGrid>中設置colspan和rowspan？

Answer 1

這兩種標準JSF實現都不可能。有3種方法可以解決此問題：

1. 自己寫一個純HTML。 A <h:panelGrid>基本上呈現HTML <table>。照着做。
2. 創建一個支持這個的自定義HTML渲染器。然而，它會帶來很多的汗水和痛苦。
3. 使用支持此功能的第三方組件庫。
   • Tomahawk具有<t:panelGroup>部件支持在<h:panelGrid>colspan。
   • RichFaces（僅限3.x）具有<rich:column>組件，它支持colspan和rowspan的<rich:dataTable>。
   • PrimeFaces在和<p:dataTable>（也與<p:columnGroup>）都支持<p:column>旁邊有一個<p:row>。

Answer 2

我同意BalusC答案，並要補充一點，如果你使用它的p:dataTable組件Primefaces JSF2組件庫還提供了這個功能。它在那裏被稱爲分組。

Answer 3

假設

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）一個細胞對齊的中心，具有colspan 3，幷包含一個你好div ..

五，

Answer 4

用途：富：列的colspan="2" RichFaces的

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

Answer 5

自24個januari 2012 Primefaces也有使用合併單元格和行跨度在Primefaces的panelGrid中組件的可能性。請參閱：

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

Answer 6

有沒有辦法來定義面板網格列跨度，但如果使用得當你可以把它僅僅只是簡單的標籤發生。我想向你展示一個例子。

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

請注意，button5跨越兩列給了它需要的尺寸。