jsf - 如何在 JSF panelGrid 中设置 colspan 和 rowspan？

Question

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

Answer 1

使用标准 JSF 实现，两者都不可能。有 3 种方法可以解决此问题：

1. 自己编写纯 HTML。A<h:panelGrid>基本上呈现 HTML <table>。照着做。
2. 创建一个支持此功能的自定义 HTML 渲染器。然而，这将是大量的汗水和痛苦。
3. 使用支持此功能的 3rd 方组件库。
   • Tomahawk有一个<t:panelGroup>支持colspan.<h:panelGrid>
   • RichFaces（仅限 3.x）有一个<rich:column>同时支持colspan和rowspanin的组件<rich:dataTable>。
   • PrimeFaces有一个<p:row>next<p:column>支持<p:panelGrid>和<p:dataTable>（也支持<p:columnGroup>）。

Answer 2

自 2012 年 1 月 24 日起，Primefaces 还可以在 Primefaces 的 panelGrid 组件中使用 colspan 和 rowspan。看：

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

Answer 3

用途：rich：RichFacescolspan="2"的列

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

Answer 4

认为

1. 包含两个条目的消息资源文件：

   key.row= key.gt=</td></tr><tr><td
>

2. 行.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>
   

打印一个包含 3 行的表格：

1. r1-c1、r1-c2、r1-c3

2. 3个空白单元格

3. 一个单元格对齐的中心，具有 colspan 3 并包含一个 hello div。

Answer 5

我同意 BalusC 的回答并想补充一点，如果您使用其p:dataTable组件，Primefaces JSF2 组件库也提供此功能。它在那里被称为分组。

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 跨越两列给定它需要的大小。