2017-07-17 69 views
-1

我想顯示的每個節點(每個節點旁的文本)的最大深度級別的每個節點上深度級別,現在我已經harcoded數據如下,要顯示jstree

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

深度值是硬編碼來說明和我的數據不可用,我喜歡在加載數據時動態生成深度值(更深的大多數孩子)

所以短暫需要像下面的圖像,其中深度值不是來自服務器的數據可用。 enter image description here

回答

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

+0

@DJ,我已經編輯我的問題,請看看現在,我需要深度信息,但它不能從數據庫中,所有我要做的就是動態生成並顯示它旁邊的節點的文本 –

+0

@ vigneshwar.java.developer我編輯了代碼,它顯示了你想要的深度,你將不得不現在正確地調用遞歸方法。看看這是否有效。 – Dij

+0

作品像魅力:)謝謝 –