从 json 数据创建基于 div 的树布局答案

【问题标题】：Creating div based tree layout from json data从 json 数据创建基于 div 的树布局
【发布时间】：2016-11-24 05:20:30
【问题描述】：

我正在尝试使用此数组数据动态生成基于 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 数据并创建基于树的 html

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

问题是我无法正确命名 div，因此附加逻辑出错了。任何人都可以建议需要更改的内容。

我也附上 jsfiddle 供参考https://jsfiddle.net/birju112/2wL512bs/1/

【问题讨论】：

标签： javascript json tree

【解决方案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 );

【讨论】：