如何在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>