Question

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

json 数据格式
var nodes = [
{id:1, pId:0, name: "file",sonnum:2},
{id:2, pId:1, name: "file1",sonnum:2},
{id:3, pId:1, name: "close",sonnum:1},
{id:5, pId:2, name: "file2",sonnum:0},
{id:4, pId:3, name: "close1",sonnum:0},
{id:6, pId:0, name: "edit",sonnum:1},
{id:7, pId:6, name: "undo",sonnum:2},
{id:8, pId:7, name: "undo1",sonnum:0},
{id:9, pId:7, name: "undo2",sonnum:0},
{id:10, pId:2, name: "file3",sonnum:0}
];

Answer 1

我就问一句，你的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，我再写代码。

Answer 2

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