使用列分组属性的Tabulator js库的问题

Question

我有这种HTML表结构

<thead>
  <tr>
    <th rowspan="2">Type</th>
    <th rowspan="2">Name</th>
    <th rowspan="2">Iteration ID</th>
    <th colspan="2">Script</th>
    <th rowspan="2">Action</th>
  </tr>
  <tr>
    <th>Init</th>
    <th>Post</th>
  </tr>
</thead>

以及它的外观

但应为：

我的js代码

$(document).ready(function () {
    var table = new Tabulator("#table-test", {});
});

添加codepen参考 codepen.io/paulch/pen/MzQYjg

Answer 1

制表符当前无法解释 HTML 中的分组列，它无法识别colspan或rowspan属性（这是未来版本的路线图）

您需要在构造函数对象中声明列，然后在表中解析：

Tabulator("#table-test", {
    columns:[
        {
            title:"",
            columns:[
                {title:"Type", field:"Type"},
                {title:"Name", field:"Name"},
                {title:"Iteration ID", field:"Iteration ID"},
            ],
        },
        {
            title:"Script",
            columns:[
                {title:"Init", field:"Init"},
                {title:"Post", field:"Post"},

            ],
        },
        {title:"Action", field:"Action"},
    ]
});

当采用这种方法时，我建议您在实际的 HTML 表格中只有一行标题，以便 Tabulator 更轻松地解析数据