jsf - 如何使数据表标题跨越多个列

Question

我有一个简单的 JSF 数据表，目前有四列、一个标题行和(包含当前数据)三个数据行。

我必须添加三个额外的列；那部分很容易。
我还想在现有标题行之前添加另一个标题行，标题跨越列的子集。

想要的结果是这样的:
第 1 列:第一行为空；第二行的标题。
第 2-4 列:第一行标题跨越 3 列；第二行有单独的列标题。
第 5-7 列:第一行标题跨越 3 列；第二行有单独的列标题。

这可能吗？如果是这样，我该怎么做？

以下是显示它应该是什么样子的图像。

这是我更改任何内容之前的数据表。
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample1.gif

这是我添加了三列后的数据表。我能够轻松地做到这一点。
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample2.gif

这显示了所需的最终结果，我无法弄清楚。注意“Retail Sales”和“Fleet/Gov Sales”标题分别跨越三列。
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample3.gif

Answer 1

如果您将 Richfaces(如 Bozho 提到的)与 breakBefore 一起使用，这将很容易。属性。

这是一个快速示例:

<rich:dataTable value="#{countryCodeListFactory}" var="c">
    <f:facet name="header">
        <rich:columnGroup>
            <rich:column colspan="2">Main</rich:column>
            <rich:column colspan="4">Other Details</rich:column>
            <rich:column breakBefore="true">Country ID</rich:column>
            <rich:column>Name</rich:column>
            <rich:column>Region</rich:column>
            <rich:column>Alpha</rich:column>
            <rich:column>ISO</rich:column>
            <rich:column>Flag Path</rich:column>
        </rich:columnGroup>
    </f:facet>
    <rich:column>#{c.countryId}</rich:column>
    <rich:column>#{c.countryName}</rich:column>
    <rich:column>#{c.region}</rich:column>
    <rich:column>#{c.alpha3}</rich:column>
    <rich:column>#{c.isoNum}</rich:column>
    <rich:column>#{c.flagImage}</rich:column>
</rich:dataTable>

如果不是，那么希望您使用的是facelets。然后您可以使用 <ui:repeat> 手动构建表

<table>
    <tr>
        <th colspan="2">Main</th>
        <th colspan="4">Details</th>
    </tr>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Region</th>
        <th>Alpha</th>
        <th>ISO</th>
        <th>Flag</th>
    </tr>
    <ui:repeat value="#{countryCodeListFactory}" var="c">
    <tr>
        <td>#{c.countryId}</td>
        <td>#{c.countryName}</td>
        <td>#{c.region}</td>
        <td>#{c.alpha3}</td>
        <td>#{c.isoNum}</td>
        <td>#{c.flagImage}</td>
    </tr>
    </ui:repeat>
</table>