如何在Bootsfaces數據表中實現複雜標題

Question

我正在使用Bootsfaces數據表來顯示我的數據。不過，我想實現複雜的標題如下所示：https://datatables.net/examples/basic_init/complex_header.html

我嘗試添加<th rowspan>和<th colspan>直屬第一dataTableColumn頭小，但具有在頂部有一個醜陋的空行。

我還試着在<b:dataTable...>標記下添加整個標題facet，之前用拳頭<b:dataTableColumn>，但是那個標題代碼不會生成html。還有其他建議嗎？我不想切換到primefaces或richfaces，因爲我的框架已經修復。

我，試圖實現複雜的頭部代碼看起來象下面這樣：

<b:dataTable value="#{podStatusListBean.podStatusBeanList}" 
         var="podStatus" 
         id="podStatuses"> 
    <b:dataTableColumn footer-style='background-color:orange' 
         footer-styleclass="{podStatusListBean.footerVisibility}"> 
       <f:facet name="header"> 
        <tr> 
         <th rowspan="2">Name</th> 
         <th colspan="2">HR Information</th> 
         <th colspan="3">Contact</th> 
        </tr> 
       </f:facet> 
    ... 

Answer 1

這是一個新的功能，我們已經添加到下一個版本BootsFaces（可能是1.2）。截至2017年6月15日，BootsFaces 1.1.1的當前版本僅支持以列爲單位的複雜標題。每列

複雜的頭文件（因爲BootsFaces 0.8.0支持）： 添加頁眉方面的<b:dataTableColumn />，幾乎你嘗試的方式。但請記住，BootsFaces已經生成了<tr>和<th>標籤，因此您可以再次嵌套它們。但是你可以做這樣的事情：

<b:dataTableColumn> 
    <f:facet name="header"> 
    <ul 
     style="margin-bottom: 0; list-style-type: none; padding-left: 0"> 
     <li>Price</li> 
     <li>Engine Power</li> 
     </ul> 
    </f:facet> 
     € #{car.price} 
     <br /> 
     #{car.enginePowerKW} KW (#{car.enginePower} hp) 
     </b:dataTableColumn> 
</b:dataTable> 

更復雜的標題（將與BootsFaces 1.2.0開始支持）： 添加一個頭小向周圍<b:dataTable />標籤。在這種情況下，您需要負責定義正確數量的表頭。如果你跳過一個，你會被JavaScript錯誤所獎勵。在很多情況下，它甚至會被忽視，但數據表的初始化並不完整，所以你應該小心。

<b:dataTable value="#{carPool.carPool}" 
      var="car" 
      page-length="5" 
      page-length-menu="5,10,20"> 
    <f:facet name="header"> 
    <tr> 
     <th rowspan="2">Car</th> 
     <th colspan="2">Appearance</th> 
     <th colspan="2">Technical Data</th> 
    </tr> 
    <tr> 
     <th>Color</th> 
     <th>Year</th> 
     <th>Price</th> 
     <th>Power</th> 
</tr> 
    </f:facet> 
    <b:dataTableColumn> 
     #{car.brand} #{car.type} 
    </b:dataTableColumn> 
    <b:dataTableColumn value="#{car.color}" /> 
    <b:dataTableColumn value="#{car.year}" order="asc" /> 
    <b:dataTableColumn value="#{car.price}" /> 
    <b:dataTableColumn value="#{car.enginePower}"/> 
</b:dataTable>