JSF dataTable中的多个页脚行

I am wanting to know if there is any way to have multiple footer rows in a h:dataTable (or t:datatable) I want to do somthing like this (which does not compile)

我想知道是否有任何方法在h中有多个页脚行:dataTable(或t:datatable)我想做这样的事情(不编译)

<h:dataTable ... var="row">
  <h:column>
    <f:facet name="header">
     Header
    </f:facet>
    <h:outputText value="#{row.value}"/>
    <f:facet name="footer">
     FirstFooter
    </f:facet>
    <f:facet name="footer">
     Second Footer in a new tr
    </f:facet>
  </h:column>
</h:dataTable>

With the result being somthing like this

结果是这样的事情

<table border=1 style="border:1px solid">
<thead><tr><th>Header</th></tr></thead>
<tbody><tr><td>Data Value 1</td></tr>
<tr><td>Data Value 2</td></tr>
<tr><td>Data Value ...</td></tr>
<tr><td>Data Value n</td></tr>
</tbody>
<tfoot>
<tr><td>FirstFooter</td></tr>
<tr><td>Second Footer in a new tr</td></tr>
</tfoot>
</table>

Any ideas how best to accomplish this? Thanks.

任何想法如何最好地完成这个?谢谢。

EDIT: It would be great if I could avoid using a custom control/custom renderer

编辑:如果我可以避免使用自定义控件/自定义渲染器,那将是很好的

5 个解决方案

#1

The solution I ended up using was a custom renderer associated with t:datatable (the tomahawk extension to datatable)

我最终使用的解决方案是与t:datatable相关联的自定义渲染器(对数据表的tomahawk扩展)

public class HtmlMultiHeadTableRenderer extends HtmlTableRenderer

I only had to override one method

我只需要覆盖一个方法

protected void renderFacet(FacesContext facesContext,   
  ResponseWriter writer, UIComponent component, boolean header)

with in which I looked for facets with names header, header2, header3 ... headerN (I stop looking as soon as there is one missing) and the same with footer. This has allowed me do do code like

在其中我查找了带有名称标题,标题2,标题3 ...标题的小平面(我只有一个丢失时停止查看)和页脚相同。这让我做了类似的代码

<h:dataTable ... var="row">
  <h:column>
    <f:facet name="header">
     Header
    </f:facet>
    <f:facet name="header2">
     A second Tr with th's
    </f:facet>
    <h:outputText value="#{row.value}"/>
    <f:facet name="footer">
     FirstFooter
    </f:facet>
    <f:facet name="footer2">
     Second Footer in a new tr
    </f:facet>
  </h:column>
</h:dataTable>

This took about one day(with some other extensions like allowing colspans based on groups) to code and document,

这花费了大约一天(还有一些其他扩展,例如允许基于组的colspans)来编码和记录,

#2

As McDowell said, panelGrid will do what you're asking without custom controls, unless I'm missing something.

正如McDowell所说,panelGrid会做你没有自定义控件的问题,除非我遗漏了什么。

<f:facet name="footer">
    <h:panelGrid columns="1"> 
        <h:outputText value="FirstFooter" />
        <h:outputText value="Second Footer in a new tr" />
    </h:panelGrid>
</f:facet>

This renders as follows

这呈现如下

<tfoot>
    <tr>
        <td colspan="3">
            <table>
                <tbody>
                    <tr>
                        <td>FirstFooter</td>
                    </tr>
                    <tr>
                        <td>Second Footer in a new tr</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tfoot>

You can use tags other than outputText in the panelGrid as well to get whatever effect you're looking for (just make sure that you wrap them in a panelGroup or something similar).

你也可以在panelGrid中使用除outputText之外的标签来获得你正在寻找的任何效果(只需确保将它们包装在panelGroup或类似的东西中)。

#3

The Richfaces column has the breakBefore attribute that would allow you to do something like this:

Richfaces列具有breakBefore属性,允许您执行以下操作:

<f:facet name="footer">
    <rich:column>
        <h:outputText value="First Footer"/>
    </rich:column>
    <rich:column breakBefore="true">
        <h:outputText value="Second Footer"/>
    </rich:column>
</f:facet>

Which is what you're after but unfortunately not using the library you've indicated.

这是你想要的,但不幸的是没有使用你指出的库。

If you're using Facelets you could always just build up a regular table with ui:repeat.

如果您正在使用Facelets,您可以随时使用ui:repeat来构建常规表。

#4

(Facets must have unique names (they are stored in a facet map).)

(构面必须具有唯一的名称(它们存储在构面图中)。)

Two ways to do this spring to mind:

有两种方法可以解决这个问题:

1. Just put a panelGrid in the footer and use style sheets to get the look you want.

只需将一个panelGrid放在页脚中,然后使用样式表来获得所需的外观。

2. Create a custom component that renders the markup you want.

创建一个呈现所需标记的自定义组件。

#5

I couldn't use a custom renderer, so I did it with plain html inside the JSF:

我无法使用自定义渲染器,所以我在JSF中使用普通的html做到了:

        <t:dataTable value="#{...}" var="...">

             <f:facet name="header">
                 <h:outputText escape="false" value="&lt;/th&gt;&lt;/tr&gt;"/>
                <tr>
                    <th rowspan="2" class="tableHeaderLightGrey">
                        Zeit
                    </th>

                    <th colspan="#{filterController.trafficClass.size()}" class="tableHeaderLightGrey">
                        Verbrauch
                    </th>
                    <th colspan="#{filterController.trafficClass.size()}" class="tableHeaderLightGrey">
                        Bandbreite
                    </th>
                    <th colspan="#{filterController.trafficClass.size()}" class="tableHeaderLightGrey">
                        Auslastung
                    </th>

                    <th rowspan="2" class="tableHeaderLightGrey">
                        Gesamtauslastung
                    </th>
                </tr>
                <tr>
                   <c:forEach items="#{filterController.trafficClass}" var="trafficClass">
                        <th class="tableHeaderLightGrey">
                            #{trafficClass.name}
                        </th>
                    </c:forEach>

                    <c:forEach items="#{filterController.trafficClass}" var="trafficClass">
                        <th class="tableHeaderLightGrey">
                            #{trafficClass.name}
                        </th>
                    </c:forEach>

                    <c:forEach items="#{filterController.trafficClass}" var="trafficClass">
                        <th class="tableHeaderLightGrey">
                            #{trafficClass.name}
                        </th>
                    </c:forEach>
                </tr>
                 <h:outputText escape="false" value="&lt;tr&gt;&lt;th&gt;"/>

             </f:facet>

            ... columns ...

        </t:dataTable>

The header facet opens a <tr><th> which I clode right away with the outpuut text and open again at the end to get valid html. You will get an empty <tr><th></th></tr> before and after your custom header that way, but that was acceptable in my case.

标题方面打开一个 ,我用outpuut文本立即打开,然后在最后打开以获得有效的html。你会在自定义标题之前和之后得到一个空的 ,但在我的情况下这是可以接受的。