How to dynamically add rows to nested tree data in tabulator?

问题

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?

Thanks for your help!

回答1:

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.

来源：https://stackoverflow.com/questions/54917598/how-to-dynamically-add-rows-to-nested-tree-data-in-tabulator

标签

tabulator