Bootsfacesデータテーブルで複雑なヘッダーを実現する方法

Question

私は自分のデータを表示するためにデータテーブルを使用しています。しかし、私はここに示されているように、複雑なヘッダを達成したい：https://datatables.net/examples/basic_init/complex_header.html

Iは最初dataTableColumnで直接ヘッダファセット下<th rowspan>と<th colspan>を追加しようとしたが、それは上部に醜い空白行を有します。

<b:dataTable...>タグの下に、筆頭<b:dataTableColumn>の前にヘッダーファセット全体を追加しようとしましたが、そのヘッダーコードはHTMLに生成されません。その他の提案はありますか？フレームワークが修正されたので、私は素形やリファインに切り替えることは望ましくありません。これは、我々は次のBootsFacesバージョン（おそらく1.2）に追加した新機能です

<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

：以下のような複雑なヘッダを達成しようとし

私のコードが見えます。 2017年6月15日現在、BootsFaces 1.1.1の現在のバージョンでは、列ごとに複雑なヘッダのみがサポートされています。コラムあたり

コンプレックスヘッダ（BootsFaces 0.8.0以降でサポート）： あなたがしようとした道はかなり、<b:dataTableColumn />にヘッダーファセットを追加します。しかし、BootsFacesは既に<tr>タグと<th>タグを生成しているので、2回目に入れ子にすることができます。

<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 />タグにヘッダーファセットを追加します。しかし、あなたはこのような何かを行うことができます。この場合、正しい数の表ヘッダーを定義する責任があります。あなたが1つをスキップすると、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>