Question

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

Answer 1

标准JSF实现都不可能。有3种方法可以解决这个问题：

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

Answer 2

自24 januari 2012 Primefaces也有可能在Primefaces的panelGrid组件中使用colspan和rowspan。参见：

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

Answer 3

假设

a）包含两个条目的消息资源文件：
key.row = ＆LT; / TD＆GT;＆LT; / TR＆GT;＆LT; TR＆GT;＆LT; td （忽略空格）
key.gt = ＆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并含有hello div ..

诉

Answer 4

使用：rich： RichFaces

列colspan="2"

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

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根据所需大小跨越两列。

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

6 个答案: