如何在 tabulator.js 中向嵌套表中添加新行

Question

我在父表中创建了一个表，如下所示： http://tabulator.info/examples/4.7#tree - 检查嵌套表而不是嵌套数据树。

现在，我想在嵌套表中添加一个新行。 我们可以使用table.addRow()添加到父表，但是如何添加到子/嵌套表？

我使用的是 4.7 版本

Answer 1

当您在嵌套表上调用构造函数 function 时，您需要维护表 object 的链接。 您可以将其存储在父行数据的属性中，以使其可在其他地方访问。

一个过于简单的例子：

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Make", field:"make"},
        {title:"Model", field:"model"},
        {title:"Registration", field:"reg"},
        {title:"Color", field:"color"},
    ],
    rowFormatter:function(row){
        //create and style holder elements
       var tableEl = document.createElement("div");

       row.getElement().appendChild(tableEl);

       var subTable = new Tabulator(tableEl, {
           layout:"fitColumns",
           data:row.getData().serviceHistory,
           columns:[
           {title:"Date", field:"date", sorter:"date"},
           {title:"Engineer", field:"engineer"},
           {title:"Action", field:"actions"},
           ]
       })
      
       row.update({subTable:subTable});

    },
});

在示例中，子表将可以在行组件的数据 object 上访问。 例如，如果您有包含要添加新行的表的行的组件，您可以调用：

row.getData().subTable.setData({name:"bob", age:52}), add row to nested table inside row.

Answer 2

在您必须使用 id o 设置子表之前

tableEl.setAttribute('class', "sottotabella subTable" + id + ""); 
var subTable = new Tabulator(tableEl, {}....)

然后你可以得到子表

var tableSub = Tabulator.prototype.findTable(".subTable" + idSub)[0];

并添加行

tableSub.addData([{}])