javascriptjstreejstree-search

To show depth level on each node jstree


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. enter image description here


Solution

  • 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);