如何在制表器中动态地将行添加到嵌套树数据？

Question

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

谢谢你的帮助！

Answer 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});
});

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