带有colspan或rowspan的jquery Bootgrid多个tr

Question

如何在 jQuery Bootgrid 上格式化表头？

当我使用 Bootgrid 函数初始化表时，多个表头格式错误。以下示例向您展示了我想要的：

<div class="table-responsive">
    <table id="grid-table" class="table table-condensed table-hover table-striped table-bordered">
        <thead>
            <tr>
                <th data-column-id="col1"   rowspan="2" > Col1  </th>
                <th data-column-id="col2"   rowspan="2" > Col2  </th>
                <th data-column-id="col3"   rowspan="2" > Col3  </th>
                <th data-column-id="col4"   rowspan="2" > Col4  </th>
                <th data-column-id="span1"  colspan="2" > Span1 </th>
                <th data-column-id="span2"  colspan="2" > Span2 </th>
            </tr>
            <tr>
                <th data-column-id="col5"   > Col5  </th>
                <th data-column-id="col6"   > Col6  </th>
                <th data-column-id="col7"   > Col7  </th>
                <th data-column-id="col8"   > Col8  </th>
            </tr>                             
        </thead>

        <tbody>
        </tbody>
    </table>
</div>

这是我不初始化 Bootgrid 时的结果。

但是当我这样做时，我得到了这个：

那么如何通过设置rowspan 或colspan 来处理thead 中的多个tr？

Answer 1

对于colspan的添加，或许可以在bootgrid初始化后添加

$('#grid-table').on("initialized.rs.jquery.bootgrid", function () {
  $('#grid-table thead').prepend(`<tr> <th colspan="2">col1</th></tr>`);
});