如何在制表器中向嵌套树数据动态添加行？答案

【问题标题】：How to dynamically add rows to nested tree data in tabulator?如何在制表器中向嵌套树数据动态添加行？
【发布时间】：2019-02-28 02:41:31
【问题描述】：

对于我的项目，我需要根据用户提交的表单数据将新的子行添加到数据树中的父行。我无法在文档中找到如何执行此操作的示例。这可以使用 addRow({...}) 函数吗？我将如何声明要添加子行的父级？或者我是否需要构建一个自定义函数，将新行插入表 JSON 对象并重绘表？

感谢您的帮助！

【问题讨论】：

标签： tabulator

【解决方案1】：

我使用的解决方案是将新的行对象添加到父行的 _children 数组的副本中，然后向父行发送更新。为此，您需要找到父行，获取它的数据（其中将包含子行对象的_children数组），将新的数据行添加到_children，并更新数据表中的父行数据。

$("#add-child-row").click(function(){
    //Get values for child row form fields
    var childFields = $("#child-form").serializeArray().reduce(function(obj, item) {
        obj[item.name] = item.value;
        return obj;
    }, {});

    var newRow = {
        name: childFields.name,
        location: childFields.location,
        gender: childFields.gender,
        col: childFields.color,
        dob: childFields.dob,
    };

    //Find row to add child
    //searchRows() returns array
    //In my case, I am only expecting one matching row so use index 0
    var parentRow = table.searchRows("name","=","Oli Bob");

    //Get data for the parent row so we can update it's _children array
    var tempParentRowData = parentRow[0].getData();

    //Add new row to children array
    tempParentRowData._children.push(newRow);

    //Update data table row with new children array
    parentRow[0].update({_children:tempParentRowData._children});
});

如果您期望有大量子行，我不知道这会有多好。如果上述解决方案有任何缺陷或有更好的解决方案，我很乐意看到。

【讨论】：