js 根据Json数据的父子关系动态生成table 如图

我就问一句，你的json数据还会变化不？

如果不会，就傻傻地把 nodes数组里面的数据插到table里去。

如果变化的话，你这样的json数据结构真是不好，不容易自动化，重写一个json也比照着这样结构要省时间。比如：

var nodes = [
    { 
        id: 1,
        name: "file",
        son:    {
                id: 2, name: "file1", .....
                },
        .....
    },
    {
        id: 1,
        name: "file",
        son:    {
                id: 2, name: "file1", .....
                },
    }
]

像这样的结构，解析起来要容易得多。要是能改json，我再写代码。

//后台返回示例：var data = [{id:'',name:'',pid:''},{id:'',name:'',pid:''}]

//获取元素所在深度
function getDepth(pid, depth){
for(var i = 0; i< data.length; i++){
if(data[i].id === pid){
++depth;
if(!data[i].pid || data[i].pid === 'rcgc' || data[i].pid === '')return depth;
return getDepth(data[i].pid, depth)
}
}
return depth;
}
for(var i = 0; i data[i]['depth'] = getDepth(data[i].pid, 1);
}

/**
* 生成表格
*
*/

var maxLevel=0;
function createTable(_) {
$.each(_['childrens'], function(i, n) {
var htmls = '';
if(n['childrens'].length > 0) {
htmls = ''+getChildrenHtml(htmls, n, maxLevel);
} else {
htmls += ''+n.name+'';
for(var j = 1; j < maxLevel; j++) {
htmls += '';
}
htmls += '';
}
$("#rootTable").append(htmls);
});
$("#rootTable").find('tr:eq(1)').find('td:eq(0)').before(''+$("#hiddenSpan1").text()+'');
}
function getChildrenHtml(htmls, data, ml) {
htmls += ''+data.name+ '';
if(data['childrens'].length > 0) {
$.each(data['childrens'], function(i, n) {
if(i > 0) {
htmls += '';
}
htmls = getChildrenHtml(htmls, n, ml);
});
} else {
var v = ml - data['depth'];
for(var i = 0; i < v; i++) {
htmls += '';
}
//可以根据表头自定义扩展一些信息
htmls += '';
}
return htmls;
}

/**
* 最大合并行数
*/
function getTotleRowCount(data, count) {
if(0 == data.length) {
return count+1;
}
$.each(data, function(i, n) {
if(n['childrens'].length > 0) {
count = getTotleRowCount(n['childrens'], count)-1;
}
count += 1;
});
return count;
}

/**
* 组装成树
* @param id
* @returns {[]}
*/
function getChild(id){
let arr = [];
data.forEach(function(k,i){
if(k.pid === id){
k.childrens = getChild(k.id);//递归查找子节点
arr.push(k);
}
})
return arr;
}
var tree = {
childrens : [{
id:'jh',
name:'计划',
depth:1,
childrens: getChild('jh')
}]
};
createTable(tree);