使用列分组属性的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.io/paulch/pen/MzQYjg

Answer 1

Tabulator当前无法从HTML解释分组的列，它无法识别 colspan 或 rowspan 属性< em>（这是将来版本的路线图）

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

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可以更轻松地解析数据