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

如果您使用具有breakBefore属性的Richfaces（如Bozho提到的那样），这将很容易。

这是一个简单的例子：

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

Answer 2

您无法使用<h:dataTable>执行此操作。好吧，你可以使用一些丑陋的黑客，比如用javascript修改DOM并添加所需的列，但这不是你应该做的。

查看RichFaces dataTable - 其列支持colspan属性。

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

2 个答案: