從JSON數據創建基於div的樹佈局

Question

我想使用此數組數據動態地生成基於div的樹佈局。

[{ 
name: "Asset Cost Allocation", 
children:[ 
    { 
    name:"Child 1", 
    children: [{ 
     name:"Child 1-1", 
     children:[ 
     { 
      name:"Child 1-1-1" 
     } 
     ] 
    },{ 
     name:"child 1-2" 
    }] 
    }, 
    { 
    name: "Child 2", 
    children:[{ 
     name:"Child 2-1", 
     children:[{ 
     name:"Child 2-1-1" 
     }] 
    }] 
    }, 
    { 
    name: "Child 3", 
    children:[ 
     { 
     name:"Child 3-1" 
     } 
    ] 
    } 
] 
}] 

我循環JSON數據，並使用下面

var branch = {}; 
var depth = 0; 
var rootNode = true; 
var pointerBranch; 
function renderTree(){ 
    for(var i=0; i< window.data.length; i++){ 
     if(window.data[i].children){ 
      renderRootNode(depth,i,window.data[i]); 
     } 
    } 
} 
function renderRootNode(depth,i,node){ 
    if(rootNode){ 
     $('#wrapper').append("<span class='label'>"+node.name+"</span"); 
     $('#wrapper').append("<div class='branch' id="+i+"-"+depth+"></div>"); 
     pointerBranch = '#'+i+"-"+depth; 
     rootNode = false; 
    }else{ 
     branch['branch-'+i+'-'+depth] = true; 
     $(pointerBranch).append("<div class='entry'><span class='label'>"+node.name+"</span><div class='branch' id="+i+"-"+depth+"></div></div>"); 
     pointerBranch = '#'+i+"-"+depth; 
    } 
    depth++; 
    if(node.children){ 
     for(var a=0;a<node.children.length;a++){ 
      if(node.children[a].children){ 
       renderRootNode(depth,a,node.children[a]); 
       if(a === node.children.length - 1){ 
        depth -= 2; 
        pointerBranch = '#'+i+"-"+depth; 
       } 
      }else{ 
       $(pointerBranch).append("<div class='entry'><span class='label'>"+node.children[a].name+"</span></div>"); 
       if(a === node.children.length - 1){ 
        depth -= 2; 
        pointerBranch = '#'+i+"-"+depth; 
       } 
      } 
     } 
    } 
} 

renderTree(); 

代碼中的問題creting基於樹的html是我不能說出div的正常等的追加邏輯是錯誤的。任何人都可以提出什麼需要改變。

我還附上的jsfiddle參考https://jsfiddle.net/birju112/2wL512bs/1/

Answer 1

我建議你以下節點渲染功能。它是一個類似於你的遞歸類，但它不使用「簡化」其邏輯的外部變量。所有DOM結構都是在變量中創建的，然後將其添加到頁面中。最大的區別是當前元素（指pointerBranch變量）作爲參數傳遞。

function renderNode(node, element, index, depth) 
{ 
    var nodeTitle = $("<span/>").addClass("label").text(node.name); 
    var branch = $("<div/>").addClass("branch").attr("id", index + "-" + depth); 

    if(node.children) 
    { 
     for(var j = 0 ; j < node.children.length ; j++) 
     { 
      var entry = $("<div/>").addClass("entry"); 

      renderNode(node.children[j], entry, j, depth + 1); 
      branch.append(entry); 
     } 
    } 

    element.append(nodeTitle).append(branch); 
} 

所以在renderTree函數調用將是：

renderNode(window.data[i], $("#wrapper"), i, 0);