Cách tạo các tiêu đề có thể lập lịch trình bao gồm một số cột

Question

Tôi có một dữ liệu JSF đơn giản, hiện có bốn cột, một hàng tiêu đề và (với dữ liệu hiện tại) ba hàng dữ liệu.

Tôi phải thêm ba cột phụ; phần đó dễ dàng.
Tôi cũng muốn thêm hàng tiêu đề khác trước hàng tiêu đề hiện tại có tiêu đề trải dài một tập con của các cột.

Kết quả mong muốn như sau:
Cột 1: hàng đầu tiên trống; tiêu đề trên hàng thứ hai.
Cột 2-4: tiêu đề hàng đầu tiên kéo dài 3 cột; hàng thứ hai có các tiêu đề cột riêng lẻ.
Cột 5-7: tiêu đề hàng đầu tiên kéo dài 3 cột; hàng thứ hai có các tiêu đề cột riêng lẻ.

Điều này có khả thi không? Nếu vậy, làm thế nào để làm điều đó?

Sau đây là hình ảnh hiển thị hình ảnh trông như thế nào.

1. Đây là bảng dữ liệu trước khi tôi thay đổi bất kỳ thứ gì.
   Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample1.gif

2. Đây là bảng dữ liệu sau khi tôi đã thêm ba cột. Tôi đã có thể làm điều này một cách dễ dàng.
   Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample2.gif

3. Điều này cho thấy kết quả cuối cùng mong muốn mà tôi không thể tìm ra. Lưu ý tiêu đề "Bán lẻ" và "Bán hàng/Bán hàng" của mỗi khoảng ba cột.
   Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample3.gif

Answer 1

Bạn không thể làm điều này với <h:dataTable>. Vâng, bạn có thể với một số hacks xấu xí, như sửa đổi DOM với javascript và thêm các cột mong muốn, nhưng đó không phải là những gì bạn nên làm.

Hãy xem RichFaces dataTable - các cột của nó hỗ trợ thuộc tính colspan.

Answer 2

Điều này sẽ dễ dàng nếu bạn đang sử dụng Richfaces (như Bozho đề cập) với thuộc tính breakBefore.

Dưới đây là một ví dụ nhanh:

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

Nếu bạn không sau đó hy vọng bạn đang sử dụng Facelets. Sau đó, bạn có thể xây dựng bảng theo cách thủ công bằng cách sử dụng <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>