前言
后端返回一个JSON串,返回了每个表格的行列,制定动态表格
实现的效果
后端返回的数据
let dataJsons = {
reportDef: {
name: "2 基金净值表现",
type: "季报",
freezeRow: 3,
freezeCol: 3,
tableDef: [
{
rowIndex: 1,
colIndex: 1,
colspan: 1,
rowspan: 2,
valueType: "普通文本",
value: "阶段",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 1,
colIndex: 2,
colspan: 3,
rowspan: 1,
valueType: "普通文本",
value: "净值增长率(%)",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 1,
colIndex: 5,
colspan: 3,
rowspan: 1,
valueType: "普通文本",
value: "净值增长率(%)1",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 1,
colIndex: 8,
colspan: 3,
rowspan: 1,
valueType: "普通文本",
value: "净值增长率(%)2",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 1,
colIndex: 11,
colspan: 3,
rowspan: 1,
valueType: "普通文本",
value: "净值增长率(%)3",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 1,
colIndex: 14,
colspan: 1,
rowspan: 2,
valueType: "普通文本",
value: "是否公共",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 2,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "托管金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 3,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "外包金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 4,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "差额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 5,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "托管金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 6,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "外包金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 7,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "差额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 8,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "托管金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 9,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "外包金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 10,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "差额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 11,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "托管金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 12,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "外包金额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 2,
colIndex: 13,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "差额",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 1,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "当日",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 1,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "自基金合同生效起至今",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 2,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "32",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 2,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "42",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 3,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "33",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 4,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "34",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 5,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "35",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 6,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "36",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 7,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "37",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 8,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "38",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 9,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "39",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 10,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "310",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 11,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "311",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 12,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "312",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 13,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "313",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 3,
colIndex: 14,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "是",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 3,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "43",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 4,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "44",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 5,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "45",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 6,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "46",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 7,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "47",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 8,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "48",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 9,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "49",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 10,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "410",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 11,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "411",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 12,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "412",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 13,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "413",
style: "font-weight:bold;text-align:center;",
},
{
rowIndex: 4,
colIndex: 14,
colspan: 1,
rowspan: 1,
valueType: "普通文本",
value: "否",
style: "font-weight:bold;text-align:center;",
},
],
},
};
获取行和列并去重排序
let rows = [];
let cols = [];
let tableDef = dataJsons.reportDef.tableDef;
//拿到行和列并去重排序
tableDef.map((item) => {
rows.push(item.rowIndex);
cols.push(item.colIndex);
});
let rowsArr = [...new Set(rows)].sort(function (a, b) {
return a - b;
});
let colsArr = [...new Set(cols)].sort(function (a, b) {
return a - b;
});
//创建表格
this.createTable(rowsArr, colsArr, tableDef);
创建动态表格
createTable(rows, cols, tableDef) {
let table = document.getElementById("table");
var tab = '<table border=1 width=100% class="table">';
for (var i = 0; i < rows.length; i++) {
tab += "<tr>";
let res = [];
for (var j = 0; j < cols.length; j++) {
res = tableDef.filter((item) => {
return item.rowIndex == rows[i] && item.colIndex == cols[j];
});
if (res.length) {
tab +=
"<td colspan=" +
res[0].colspan +
" rowspan=" +
res[0].rowspan +
" style= " +
res[0].style +
">" +
res[0].value +
"</td>";
}
}
tab += "</tr>";
}
tab += "</table>";
table.innerHTML = tab;
},