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

Question

我有这样的结构 html table

<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

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

您需要在构造函数 object 中声明列，然后在 table:

中解析

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 table 中只有一行 headers 以使 Tabulator 更容易解析数据

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

Issue with Tabulator js library working with Column Grouping properties

javascript

html

tabulator