如何在制表器中向嵌套树数据动态添加行? [英] How to dynamically add rows to nested tree data in tabulator?

问题描述

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

For my project, I need to add new child rows to parent rows in a datatree based on user submitted form data. I wasn't able to find an example of how to do this in the documentation. Is this possible using the addRow({...}) function? How would I declare which parent to add the child row? Or would I need to build out a custom function which inserts the new row into the table JSON object and redraw the table?

感谢您的帮助！

推荐答案

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

The solution I used is to add new row objects to a copy of the _children array of the parent row and then send an update to the parent row. To do this, you need to find the parent row, get it's data (which will include the _children array of child row objects), add the new row of data to _children, and update the parent row data in the data table.

$("#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});
});

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

I don't know how well this would work if you are expecting to have a huge number of children rows. If there is anything flawed with the above solution or a better solution out there, I would love to see it.

这篇关于如何在制表器中向嵌套树数据动态添加行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！