Как сделать датируемые заголовки размером в несколько столбцов

Question

У меня есть простая таблица данных JSF, которая в настоящее время имеет четыре столбца, одну строку заголовка и (с текущими данными) три строки данных.

Я должен добавить три дополнительных столбца; с этой частью все просто.
Я также хочу добавить еще одну строку заголовка перед существующей строкой заголовка с заголовками, которые охватывают подмножество столбцов.

Желаемый результат примерно такой:
Колонка 1: первая строка пуста; заголовок во втором ряду.
Столбцы 2-4: заголовок первой строки охватывает 3 столбца; второй ряд имеет отдельные заголовки столбцов.
Столбцы 5-7: заголовок первой строки охватывает 3 столбца; второй ряд имеет отдельные заголовки столбцов.

Возможно ли это? Если да, то как мне это сделать?

Ниже приведены изображения, показывающие, как это должно выглядеть.

1. Это таблица данных, прежде чем я что-то изменил.
   Таблица Пример 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample1.gif

2. Это таблица данных после того, как я добавил три столбца. Я смог сделать это легко.
   Таблица Пример 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample2.gif

3. Это показывает желаемый конечный результат, который я не могу понять. Обратите внимание, что заголовки «Розничные продажи» и «Продажи из автопарка / правительства» охватывают три столбца.
   Таблица Пример 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample3.gif

Answer 1

Это было бы легко, если бы вы использовали Richfaces (как упоминает Божо) с атрибутом 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>

Если нет, то, надеюсь, вы используете фейслеты. Затем вы можете построить таблицу вручную, используя <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>. Ну, вы можете сделать это с помощью некоторых уродливых хаков, таких как изменение DOM с помощью javascript и добавление нужных столбцов, но это не то, что вам следует делать.

Взгляните на RichFaces dataTable - его столбцы поддерживают атрибут colspan.