原生渲染自插入列表
方法内容：
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"
}
]]
