4
我想使用此数组数据动态地生成基于div的树布局。从JSON数据创建基于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/
感谢您指出了正确的方向。 –