Friday 30 March 2018

Useful jstree events & functions

Get jstree node by id

Syntax:  $("jstree_id").jstree(true).get_node("node_id", true);
Example:  $("#mytree").jstree(true).get_node(j1_1, true);

Set maximum length for jstree node input

$(".jstree-rename-input").attr('maxLength', 20);

Get jstree node length (total number of nodes)

var nodeLen=$("#mytree").jstree(true).get_json('#', {flat:false}).length;
console.log(nodeLen)

How to rename jstree node

$("#mytree").jstree('rename_node', data.node , "My Node" ); // set name as "My Node"

Do some operation when node is opened (jstree open node event)

$("#mytree").on('open_node.jstree', function(evt, data){
 // Do something
});

Do some operation when node is hovered (This event will be triggered when you hover on jstree node)

$("#mytree").on("hover_node.jstree", function(evt, data){
 // Do something
});

Set new id for jstree node

var newId=10;
$("#mytree").jstree(true).set_id(node,newId);

Get children of node

var nodeId=10;
var childrensArr = $("#mytree").jstree(true).get_node(nodeId).children;
for (var i = 0; i < childrensArr.length; i++){    
 // Do something
}

Open all jstree nodes

$("#mytree").jstree("open_all");