jstree jquery how to iterate through all nodes

17,878

Solution 1

This gets all the children of your tree in a flat array for your .each loop.

$("#tree").bind('ready.jstree', function(event, data) {
  var $tree = $(this);
  $($tree.jstree().get_json($tree, {
      flat: true
    }))
    .each(function(index, value) {
      var node = $("#tree").jstree().get_node(this.id);
      var lvl = node.parents.length;
      var idx = index;
      console.log('node index = ' + idx + ' level = ' + lvl);
    });
});

JSFiddle - Docs for get_json

Solution 2

Another way is to open them before trying to access nodes in dom and then close them:

$("#tree").bind('ready.jstree', function (event, data) {
  $(this).jstree().open_all(); // open all nodes so they are visible in dom
    $('#tree li').each(function (index,value) {
        var node = $("#tree").jstree().get_node(this.id);
        var lvl = node.parents.length;
        var idx = index;
        console.log('node index = ' + idx + ' level = ' + lvl);
    });
    $(this).jstree().close_all(); // close all again
});

Solution 3

"Nodes" is an overloaded term. Do you mean the HTML nodes or just the JSON data used to define each node in the jstree? I had a need to iterate through the jstree in order to extract the value for the ID field in each jstree node. If that's all you need, there's a simpler approach:

var v =$("#tree").jstree(true).get_json('#', {'flat': true});
for (i = 0; i < v.length && i < 10; i++) {
    var z = v[i];
    alert("z[id] = " + z["id"]);
}

Solution 4

I wanted a library-way of iterating over the nodes of a jsTree, so I wrote this into the jstree.js file:

each_node: function(callback) {
    if (callback) {
        var id, nodes = this._model.data;
        for (id in nodes) {
            if (nodes.hasOwnProperty(id) /*&& id !== $.jstree.root*/) {
                callback.call(this, nodes[id]);
            }
        }
    }
},

(Note: I'm using jsTree 3.3.4, and I've inserted the above code on line 3712 right after the get_json function definition.)

In code, I can iterate through the nodes of the tree like this:

$("#myTree").jstree(true).each_node(function (node) {
    // 'this' contains the jsTree reference

    // example usage: hide leaf nodes having a certain data attribute = true
    if (this.is_leaf(node) && node.data[attribute]) {
        this.hide_node(node);
    }
});
Share:
17,878

Related videos on Youtube

Hshdj122
Author by

Hshdj122

Updated on June 07, 2022

Comments

  • Hshdj122
    Hshdj122 4 months

    I'm trying to iterate through every node within a treeview in jstree. The treeview is 4 levels deep but I can't seem to get past the 1st level. The following is the jQuery used to iterate.

    $("#myTree").bind('ready.jstree', function (event, data) {
        $('#myTree li').each(function () {
            // Perform logic here
            }
        });
    });
    

    Here is a jsfiddle illustrating my point. Please help on how I can iterate through every node in jstree.

    • E. Sundin
      E. Sundin over 6 years
      Inspecting the code the return of a single li seems to be caused by the abstraction of jsTree. When your listener fires the #myTree actually only contains one single li.
    • E. Sundin
      E. Sundin over 6 years
      You have several answers which provides a solution. Consider marking an answer as accepted if it seems as a complete solution to your question.

Related