如何在 JSF panelGrid 中设置 colspan 和 rowspan？答案

【问题标题】：How to set colspan and rowspan in JSF panelGrid?如何在 JSF panelGrid 中设置 colspan 和 rowspan？
【发布时间】：2011-03-07 20:48:41
【问题描述】：

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

【问题讨论】：

标签： jsf html-table panelgrid

【解决方案1】：

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

自己编写纯 HTML。 <h:panelGrid> 基本上呈现 HTML <table>。做同样的事情。
创建一个支持此功能的自定义 HTML 渲染器。然而，这将是大量的汗水和痛苦。
使用支持此功能的第 3 方组件库。
- Tomahawk 有一个 <t:panelGroup> 组件，它在 <h:panelGrid> 中支持 colspan。
- RichFaces（仅限 3.x）有一个 <rich:column> 组件，它支持 <rich:dataTable> 中的 colspan 和 rowspan。
- PrimeFaces 在<p:column> 旁边有一个<p:row>，<p:panelGrid> 和<p:dataTable> 都支持（<p:columnGroup> 也支持）。

【讨论】：

您是否尝试过使用 colspan 的 panelgrid 中的 rich:column？因为文档说：““colspan”、“rowspan”和“breakbefore”属性只影响中的列，而不影响中的列。”

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用：rich:column colspan="2" of RichFaces

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

【讨论】：

这个问题是关于 JSF 而不是richfaces

【解决方案4】：

假设

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

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

行.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 行的表格：

r1-c1, r1-c2, r1-c3
3 个空白单元格
一个单元格对齐中心，具有 colspan 3 并包含一个 hello div。

【讨论】：

也不是我做事的方式。即使它可能会回答问题，也请尝试进行教育。不好的做法是……好……不好。 :)

【解决方案5】：

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

【讨论】：

【解决方案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>

请注意，按钮 5 根据其所需的大小跨越两列。

【讨论】：