jstree jquery plugin - Get all child and sub child nodes of parent

Question

I am using the jsTree jquery plugin

I am trying to fetch all the nodes and sub nodes of a selected parent. But somehow it\'s not working unless I use recursion.

Answer 1

I found a way to do this. In my case I am using xml as the datasource for the tree. I am binding the open_node event to the jstree in the following manner. Mind it that even though I am using xml, the internal structure is that of html data.

// jsTree Configuration hash
var jsTreeConfig = {};

$("#demo1").jstree( jsTreeConfig )
            .bind('open_node.jstree', function( e, data ) {
                var parentObj = data.rslt.obj; // parent object
                var jstreeInstance = data.inst; // jstree instance
                $(data.rslt.obj).find("li").each( function( idx, listItem ) {
                    var child = $(listItem); // child object
                    // do Stuff with child which can be any level of hierarchy depth
                    // ...
                });
            });

Answer 2

I tried the previous solution and it is not working with the latest version of jsTree (v3.2.1). Below is an updated solution to get the child nodes and sub nodes of the parent.

$("#myTree").bind('selected_node.jstree', function (node, data) {
    var selectedNodes = $("#myTree").jstree(true).get_json(data.node.id, { flat: true });
    for (var i = 0; i < selectedNodes.length; i++) {
       // Apply logic here
       // ...
       // ...
       // ...
    }
});

Answer 3

You can get full tree all by using this selector: $("#demo1").find("li > a")