CODEWITHSUNDEEP
javascriptjqueryjstree
user3401747
user3401747

Reputation: 131

How to get all the children nodes from the selected node in jstree

var selectedNode = $("#evts").jstree("get_selected");

Hi everyone.. I am using the above code to get the selected node from the tree. How to get all the children nodes for the selectedNode...I am using jstree 3.3...

Thanks in advance!

Upvotes: 5

Views: 18679

Answers (5)

Zahra Badri
Zahra Badri

Reputation: 2034

For example:

enter $('button').on('click', function () {
var instance = $('#tree').jstree(true);
    selected = instance.get_selected()[0];
console.log(instance.get_node(selected).children);
});

If you want to do that in an event handler - it is even easier:

$('#tree').on('changed.jstree', function (e, data) {
console.log(data.instance.get_node(data.selected[0]).children);
});

Upvotes: 0

Grega Rednak
Grega Rednak

Reputation: 36

   // Return childen even if not rendered
  function getAllChildrenNodes(parentNode, children=[]) {
    var node = $("#SimpleJSTree").jstree("get_node",parentNode);
    children.push(node.id);
    if (node.children) {
      for (var i = 0; i < node.children.length; i++) {
        getAllChildrenNodes(node.children[i], children);
      }
    }
    return children;
  }
 var selectingInProccess=0;
  // select all child nodes when parent selected
  $('#SimpleJSTree').on('select_node.jstree', function (e, data) {
    if(selectingInProccess==0){
      selectingInProccess=1;
      var closedNodes=[];
      var children = getAllChildrenNodes(data.node.id);
      children.forEach(function(node){
        var nodeClosed = ($("#SimpleJSTree").jstree("is_closed",node));
        $("#SimpleJSTree").jstree("select_node",node);
        if(nodeClosed){
          closedNodes.push(node);
        }
      });
      closedNodes.forEach(function(node){
        $("#SimpleJSTree").jstree("close_node",node,false);
      });
      selectingInProccess=0;
    }
  });

  // deselect all child nodes when parent deselected
  $('#SimpleJSTree').on('deselect_node.jstree', function (e, data) {
    if(selectingInProccess==0){
      selectingInProccess=1;
      var children = getAllChildrenNodes(data.node.id);
      children.forEach(function(node){
        $("#SimpleJSTree").jstree("deselect_node",node);
      });
      selectingInProccess=0;
    }
  });

Upvotes: 2

Joshy Francis
Joshy Francis

Reputation: 349

 var selectedNode = $("#evts").jstree("get_selected");
 var node_info=$('#evts').jstree("get_node",selectedNode[0]);

 // this node_info contains **children_d** an array of all child nodes' id .
 // **parents** an array of parent nodes


    alert(node_info.children_d.join(','));
    alert(node_info.parents.join(','));

Upvotes: 3

user3401747
user3401747

Reputation: 131

var currentNode = $("#evts").jstree("get_selected");
   var childrens = $("#evts").jstree("get_children_dom",currentNode);

   for(var i=0;i<childrens.length;i++)
   {
   alert(childrens[i].innerText);
   }

the above code works as expected...

Upvotes: 5

CMedina
CMedina

Reputation: 4222

You can use get_children_dom (obj) for get childrens try...

var selectedNode = $("#evts").jstree("get_selected");
var childrens = get_children_dom(selectedNode);

Doc: https://www.jstree.com/api/#/?f=get_children_dom(obj)

Upvotes: -1

Related Questions