如何在 Bootsfaces 数据表中实现复杂的表头

Question

我正在使用 Bootsfaces 数据表来显示我的数据。但是，我想实现如下所示的复杂标头：https://datatables.net/examples/basic_init/complex_header.html

我尝试在第一个 dataTableColumn 的标题方面直接添加 <th rowspan> 和 <th colspan>，但顶部有一个丑陋的空行。

我还尝试在<b:dataTable...> 标记下添加整个标题方面，在第一个<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>