I would like to show the maximum depth level on each node (next to the text on each node), right now I have harcoded the data as below,
$('#data').jstree({
'core' : {
'data' : [
{ "text" : "Root node, Depth: 2",
"children" : [
{ "text" : "Child node 1, Depth: 1",
"children" : [
{ "text" : "Grand Child node 1, Depth: 0" }
]},
{ "text" : "Child node 2, Depth: 0" }
]}
]
}
});
The depth value is hardcoded to illustrate and not available in my data, I like to generate the depth value (deeper most children) dynamically while loading the data
So In-short need something like below image, where depth value is not available on the data from server.
your object core seems wrong with "text" : "Root node, Depth: 2",
but i assumed the object like below and then you can use recursion to get depth for each node.
var core = {
'data' : [
{ "text" : "Root node",
"children" : [
{ "text" : "Child node 1",
"children" : [
{ "text" : "Grand Child node 1" }
]},
{ "text" : "Child node 2" }
]}
]
};
core.data.forEach(function(obj){
findDepth(obj);
});
function findDepth(node){
var maxDepth=0;
if(node.children !== undefined){
var depth =0;
node.children.forEach(function(child){
depth = findDepth(child) + 1;
maxDepth = depth > maxDepth ? depth: maxDepth;
})
}
node.text = node.text + ", Depth: " + maxDepth;
return maxDepth;
}
console.log(core);