2010-06-24 153 views

回答

53

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

  1. 自己写一个纯HTML。 A <h:panelGrid>基本上呈现HTML <table>。照着做。
  2. 创建一个支持这个的自定义HTML渲染器。然而,它会带来很多的汗水和痛苦。
  3. 使用支持此功能的第三方组件库。
+7

您是否尝试过使用colspan的panelgrid中的rich:column?因为doc说:“colspan”,“rowspan”和“breakbefore”属性仅影响中的列,而不影响中的列。 – 2010-10-13 16:14:28

1

我同意BalusC答案,并要补充一点,如果你使用它的p:dataTable组件Primefaces JSF2组件库还提供了这个功能。它在那里被称为分组。

1

假设

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

五,

+3

不是我会做事情的方式。即使它可能回答这个问题,也请尝试教育。不好的做法是..好..不好。 :) – 2012-11-22 14:41:10

2

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

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

这个问题是关于JSF而不是richfaces – specializt 2016-01-19 13:44:43

0

有没有办法来定义面板网格列跨度,但如果使用得当你可以把它仅仅只是简单的标签发生。我想向你展示一个例子。

<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跨越两列给了它需要的尺寸。