Как заставить заголовки таблицы данных охватить многие столбцы
У меня есть простая таблица данных JSF, которая в настоящее время имеет четыре столбца, одна строка заголовка и (с текущими данными) три строки данных.
Я должен добавить три дополнительных столбца; та легкая часть.
Я также хочу добавить другую строку заголовка перед существующей строкой заголовка с заголовками, которые охватывают подмножество столбцов.
Желаемый результат - что-то как:
Столбец 1: первая пустая строка; заголовок на второй строке.
Столбцы 2-4: первый заголовок строки охватывает 3 столбца; вторая строка имеет заголовки отдельного столбца.
Столбцы 5-7: первый заголовок строки охватывает 3 столбца; вторая строка имеет заголовки отдельного столбца.
Действительно ли это возможно? Если так, как я делаю это?
Следующее является изображениями, показывающими, на что оно должно быть похожим.
Это - таблица данных, прежде чем я изменил что-либо.
Пример таблицы 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample1.gifЭто - таблица данных после того, как я добавил три столбца. Я смог сделать это легко.
Пример таблицы 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample2.gifЭто показывает желаемый конечный результат, который я не могу выяснить. Отметьте "Розничную продажу" и "заголовки" Флота/Губернатора Продаж каждый промежуток три столбца.
Пример таблицы 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample3.gif
2 ответа
Вы не можете сделать это с
Взгляните на RichFaces dataTable - его колонки поддерживают атрибут colspan.
Это было бы легко, если бы вы использовали 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>
Если нет, то, надеюсь, вы пользуетесь фейсклетами. Затем вы можете создать таблицу вручную, используя
<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>