Search code examples
javascriptjqueryeditjstreetraversal

JSTree, traverse and edit each nodes


I'm new to JSTree, but really want to know how do you traverse jstree to edit each node? I wrote a recursive function to traverse each nodes, but strange thing to me is,

  1. I take out the data using var treeData = $('tree').get_json(true);
  2. I put this data into the function , traverse(treeData);

    traverse(treeData){ //do some editing work here. traverse(treeData'schildren); }

Wired, after the traverse finished, nothing is changed. I've already set the 'check_callback' to true.

Anyone can help? BEST regards Michael


Solution

  • With get_json you only get json object. To change nodes you have to access them. Also you have to use redraw function to update nodes based on changed data.

    An example of your functionality could look like:

    function traverse(node) {
        node.text += ' too';
        for (var i=0, len = node.children.length; i<len; i++) {
            var childNode = $("#tree").jstree().get_node(node.children[i]);
            traverse(childNode);
        }         
    }
    
    var treeData = data.node;
    traverse(data.node); 
    $('#tree').jstree().redraw(true);
    

    Check fiddle - Fiddle