在每个节点 jstree 上显示深度级别

Question

我想显示每个节点的最大深度级别（在每个节点的文本旁边），现在我已经将数据编码如下，

    $('#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" }
            ]}
        ]
    }
});

深度值是为了说明而硬编码的，在我的数据中不可用，我喜欢在加载数据时动态生成深度值（最深 children）

所以In-short需要像下图这样的东西，其中深度值在来自服务器的数据上不可用。

Answer 1

你的对象核心似乎与 "text" : "Root node, Depth: 2", 不对，但我假设对象如下所示，然后你可以使用递归来获取每个节点的深度。

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

在每个节点 jstree 上显示深度级别

To show depth level on each node jstree

javascript

jstree

jstree-search