原生渲染自插入列表

方法内容：

function $1(res) { return document.querySelector(res) }
function $2(res) { return [...document.querySelectorAll(res)] }
function Tiled(Arr) {
    let Array = []
    Arr.forEach(item => {
        item.forEach(i => {
            Array.push(i)
        })
    })
    return Array
}

//数据截取
function capture(tile, data) {
    let Array = []
    Array = JSON.parse(JSON.stringify(tile)).splice(data.rise, data.begin)
    data.rise += data.begin
    return Array
}
// 创建数据列表
function database(res) {
    let arr = [];
    let num = [...res].sort((a, b) => b.children.length - a.children.length)[0].children
    // 外层决定多少列
    num.forEach((item, is) => {
        arr[is] = arr[is] || []
        // 内层绝定多少排
        res.forEach((i, ind) => {
            if (i.children[is]) {
                if (i.children[is].className != undefined) {
                    arr[is][ind] = `<td class="numerical"><span class="${i.children[is].className}">${i.children[is].className && "0.00"}</span></td>`
                } else if (i.children[is].name != undefined) {
                    arr[is][ind] = `<td class="parameterName"><span>${i.children[is].name}</span></td>`
                }
            } else {
                arr[is][ind] = undefined
            }
        })
    })
    return arr
}
// 查找undefined,空白准备填补
function seekUn(Arr) {
    let sub = 0, up = 0, len = 0;
    Arr.forEach((item, index) => {
        if (item.some(i => i == undefined) && !sub) {
            sub = index
            up = item.indexOf(undefined)
            len = item.lastIndexOf(undefined)
        }
    })
    return {
        sub, up, len
    }
}
// 对号贴入
function injection(Arr, Arr1, seek) {
    let temporary = Arr.splice(seek.sub)
    // 长度不符合补足
    for (let a = temporary.length; a < Arr1.length; a++) {
        temporary[a] = []
        for (let i = 0; i < 13; i++) {
            temporary[a][i] = undefined
        }
    }
    let s = 0
    // 准备填入
    for (let i = 0; i < Arr1.length; i++) {
        for (let a = seek.up; a <= seek.len; a++) {
            temporary[i][a] = Arr1[i][s]
            s = Arr1[a].length - 1 > s ? s + 1 : 0
        }
    }
    return [...Arr, ...temporary]
}

// 循环数据创建
function establish(Arr, obj, seek) {
    let Arr1 = []
    Arr1 = obj.map(item => {
        console.log(item.colspan)
        return item.colspan != 0 ? `<td class="mother ${item.url ? 'link' : ''}" colspan="${item.colspan}">${item.name}</td>` : ""
    })
    Arr1 = [Arr1, ...database(obj)]
    // 根据seek准备填补 sub为0是为空直接贴入
    Arr = seek.sub ? injection([...Arr], Arr1, seek) : Arr1
    return Arr
}

function more(res, num) {
    // 截取起始函数对象
    let data = {
        rise: 0,
        begin: num
    };
    // 存放dom总数组
    let Arr = [];

    //处理过的数组
    let tile = Tiled(res)
    while (data.rise < tile.length - 1) {
        let seek = seekUn(Arr)
        Arr = establish(Arr, capture(tile, data), seek)
        // 相剪算出下次剪切长度
        seek = seekUn(Arr)
        console.log(Arr)
        data.begin = (seek.len + 1) - seek.up
    }
    // 数据处理完毕标签合成
    $1("table").innerHTML += Arr.map((item, index) => {
        return `<tr class="${index % 2 ? "one" : "both"}">${item.map(i => {
            if (i == undefined) {
                return `<td></td>`
            }
            return i
        }).join("")}</tr>`
    }).join("")
}
// 数据 表格长度
more(res, 13)

　　数据格式

var res = [
    [{
    name: "烧结区域",
    colspan: "1",
    children: [
        {
            name: "烧结机机速",
            colspan: "1",
        }, {
            name: "点火炉温度1",
            colspan: "1",
        }, {
            name: "点火炉煤气压力",
            colspan: "1"
        }, {
            name: "点火炉煤气流量",
            colspan: "1"
        }, {
            name: "1#脱硝煤气流量",
            colspan: "1"
        }, {
            name: "1#主抽风机风门开度",
            colspan: "1"
        }, {
            name: "南烟道负压",
            colspan: "1"
        }, {
            name: "混合仓小时下料量",
            colspan: "1"
        }
    ]
}, {
    name: "1#烧结机作业区",
    children: [
        {
            className: "DA_SJ_1SJ_BT210",
            colspan: '1'
        }, {
            className: "DA_SJ_1SJ_BT219",
            colspan: "1"
        }, {
            className: "DA_SJ_1SJ_BT097",
            colspan: "1"
        }, {
            className: "DA_SJ_1SJ_BT098",
            colspan: "1"
        }, {
            className: "DA_SJ_1SJTX034",
            colspan: "1"
        }, {
            className: "DA_SJ_1SJ_BT101",
            colspan: "1"
        }, {
            className: "",
            colspan: "1"
        }, {
            className: "DA_SJ_1SJ_BT223",
            colspan: "1"
        }
    ],
    colspan: "1",
}, {
    name: "2#烧结机作业区",
    children: [
        {
            className: "DA_SJ_2SJBT019",
            colspan: '1'
        }, {
            className: "DA_SJ_2SJBT224",
            colspan: "1"
        }, {
            className: "DA_SJ_2SJBT125",
            colspan: "1"
        }, {
            className: "DA_SJ_2SJBT002",
            colspan: "1"
        }, {
            className: "DA_SJ_2SJTX034",
            colspan: "1"
        }, {
            className: "DA_SJ_2SJBT003",
            colspan: "1"
        }, {
            className: "DA_SJ_2SJBT011",
            colspan: "1"
        }, {
            className: "DA_SJ_2SJBT228",
            colspan: "1"
        }
    ],
    colspan: "1",
}, {
    name: "3#烧结机作业区",
    children: [
        {
            className: "DA_SJ_3SJBT230",
            colspan: "1",
        },
        {
            className: "DA_SJ_3SJBT243",
            colspan: "1",
        },
        {
            className: "DA_SJ_3SJBT085",
            colspan: "1",
        },
        {
            className: "DA_SJ_3SJBT086",
            colspan: "1",
        },
        {
            className: "DA_SJ_3SJTX028",
            colspan: "1",
        },
        {
            className: "DA_SJ_3SJBT099",
            colspan: "1",
        },
        {
            className: "DA_SJ_3SJBT108",
            colspan: "1",
        },
        {
            className: "DA_SJ_3SJBT247",
            colspan: "1",
        },
    ],
    colspan: "1",
}], [
    {
        name: "竖炉区域",
        children: [{
            name: "生球流量",
            colspan: "1"
        }, {
            name: "炉篦东温度",
            colspan: "1"
        }, {
            name: "炉篦西温度",
            colspan: "1"
        }, {
            name: "煤气加压机进口压力",
            colspan: "1"
        }, {
            name: "煤气加压机进口流量",
            colspan: "1"
        }, {
            name: "燃烧室东南温度",
            colspan: "1"
        }, {
            name: "燃烧室东北温度",
            colspan: "1"
        }, {
            name: "",
            colspan: "1"
        }],
        colspan: "1"
    }, {
        name: "1#竖炉作业区",
        children: [{
            className: "DA_SJ_1SL_BT061",
            colspan: "1"
        }, {
            className: "DA_SJ_1SL_BT070",
            colspan: "1"
        }, {
            className: "DA_SJ_1SL_BT071",
            colspan: "1"
        }, {
            className: "DA_SJ_1SL_BT051",
            colspan: "1"
        }, {
            className: "DA_SJ_1SL_BT048",
            colspan: "1"
        }, {
            className: "DA_SJ_1SL_BT020",
            colspan: "1"
        }, {
            className: "DA_SJ_1SL_BT021",
            colspan: "1"
        }, {
            className: "",
            colspan: "1"
        }]
    },
    {
        name: "2#竖炉作业区",
        children: [{
            className: "DA_SJ_2SLBT053",
            colspan: "1"
        }, {
            className: "DA_SJ_2SLBT041",
            colspan: "1"
        }, {
            className: "DA_SJ_2SLBT042",
            colspan: "1"
        }, {
            className: "DA_SJ_2SLBT045",
            colspan: "1"
        }, {
            className: "DA_SJ_2SLBT077",
            colspan: "1"
        }, {
            className: "DA_SJ_2SLBT020",
            colspan: "1"
        }, {
            className: "DA_SJ_2SLBT021",
            colspan: "1"
        }, {
            className: "",
            colspan: "1"
        }]
    }
], [
    {
        name: "发电区域",
        children: [{
            name: "有功功率",
            colspan: "1"
        }, {
            name: "转速",
            colspan: "1"
        }, {
            name: "主汽温度",
            colspan: "1"
        }, {
            name: "主汽压力",
            colspan: "1"
        }, {
            name: "再热温度",
            colspan: "1"
        }, {
            name: "再热压力",
            colspan: "1"
        }, {
            name: "高炉煤气总管流量",
            colspan: "1"
        }, {
            name: "高炉煤气总管压力",
            colspan: "1"
        },],
        colspan: "1"
    }, {
        name: "一期80MW发电",
        children: [
            {
                className: "DA_FD_1QFD_001",
                colspan: "1"
            },
            {
                className: "DA_FD_1QFD_002",
                colspan: "1"
            },
            {
                className: "DA_FD_1QFD_003",
                colspan: "1"
            },
            {
                className: "DA_FD_1QFD_004",
                colspan: "1"
            },
            {
                className: "DA_FD_1QFD_007",
                colspan: "1"
            },
            {
                className: "DA_FD_1QFD_008",
                colspan: "1"
            },
            {
                className: "DA_FD_1QFD_009",
                colspan: "1"
            },
            {
                className: "",
                colspan: "1"
            },
        ],
        colspan: "1"
    }
]]