报表行合并列合并配置公用页面
需求：
报表数量过多，但功能类似，所以出于效率做一个可以配置页面
数据来源：
从ztree树中让用户去配置（如下图）
取到的数据即为ztree树的数据格式（如下图）
模拟数据：
var data=[ {name:'AA',value:2.3,id:'101',pid:'000'}, {name:'BB',value:2.3,id:'102',pid:'000'}, {name:'CC',value:2.3,id:'101101',pid:'101'}, {name:'DD',value:2.3,id:'101102',pid:'101'}, {name:'EE',value:2.3,id:'101101101',pid:'101101'}, {name:'FF',value:2.3,id:'101101102',pid:'101101'}, {name:'GG',value:2.3,id:'101102101',pid:'101102'}, {name:'HH',value:2.3,id:'101102102',pid:'101102'}, {name:'II',value:2.3,id:'102101',pid:'102'}, {name:'JJ',value:2.3,id:'102101101',pid:'102101'}, {name:'KK',value:2.3,id:'102101102',pid:'102101'}, {name:'MM',value:2.3,id:'102101103',pid:'102101'}, {name:'NN',value:2.3,id:'102101104',pid:'102101'}, {name:'LL',value:2.3,id:'102101105',pid:'102101'}, ];
实现步骤：
1、将获取到的ztree数据进行分组，按照节点id的长度进行分组得出数据{3:[],6:[],9:[]}
//分组 function group(data){ var obj={}; for(var i=0;i<data.length;i++){ var _l=data[i].id.length; if(obj[_l]===undefined){ obj[_l]=[data[i]]; }else{ obj[_l].push(data[i]) } } return obj; }
2、得出排序的规则，从id长的向短的遍历得出数组[9,6,3]
//获得排序信息 function getList(obj){ return Object.keys(obj).sort(function(a,b){return Number(b)-Number(a)}); }
3、核心部分
原理：从后面往前面遍历，遍历最后一列的时候就能够得出他的直接父级单元格的行合并，同时可以得出当前单元格拼接的str，再依次往后面遍历，遍历到第一列的时候就得出整个表格了，需要特别注意的是，除了最后一列，可以得出第二组的行合并已经第三组的str
遍历第三组的时候得出
{ 101101:{ l:2, str:'<td>101101101</td><td>101101102</td></tr>' }, 101102:{ l:2, str:'<td>101102101</td><td>101102102</td></tr>' } }
在遍历第二组的时候就需要注意了，此时需要
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { border-collapse: collapse; border-spacing: 0; width:800px; margin:auto; } td{ border:1px solid #ddd; padding:3px 10px; text-align: center; } </style> </head> <body> <div id="table"> </div> <script> var data=[ {name:'AA',value:2.3,id:'101',pid:'000'}, {name:'BB',value:2.3,id:'102',pid:'000'}, {name:'CC',value:2.3,id:'101101',pid:'101'}, {name:'DD',value:2.3,id:'101102',pid:'101'}, {name:'EE',value:2.3,id:'101101101',pid:'101101'}, {name:'FF',value:2.3,id:'101101102',pid:'101101'}, {name:'GG',value:2.3,id:'101102101',pid:'101102'}, {name:'HH',value:2.3,id:'101102102',pid:'101102'}, {name:'II',value:2.3,id:'102101',pid:'102'}, {name:'JJ',value:2.3,id:'102101101',pid:'102101'}, {name:'KK',value:2.3,id:'102101102',pid:'102101'}, {name:'MM',value:2.3,id:'102101103',pid:'102101'}, {name:'NN',value:2.3,id:'102101104',pid:'102101'}, {name:'LL',value:2.3,id:'102101105',pid:'102101'}, ]; creatTable(data); //分组 function group(data){ var obj={}; for(var i=0;i<data.length;i++){ var _l=data[i].id.length; if(obj[_l]===undefined){ obj[_l]=[data[i]]; }else{ obj[_l].push(data[i]) } } return obj; } //获得排序信息 function getList(obj){ return Object.keys(obj).sort(function(a,b){return Number(b)-Number(a)}); } //计算 function creatTable(data){ var d=group(data); var arr=getList(d); var obj={}; for(var i=0,len=arr.length;i<len;i++){ for(var k=0;k<d[arr[i]].length;k++){ var o=d[arr[i]][k]; if(obj[o.pid]===undefined){ obj[o.pid]={l:0,s:0,str:''}; } //如果为表格的最后一列 if(i==0){ obj[o.pid].l++; obj[o.pid].s+=o.value; obj[o.pid].str+=(obj[o.pid].str==''?'':'<tr>')+"<td>"+o.name+"</td><td>"+o.value+"</td></tr>";//结尾都有tr }else{ var str=''; //如果为表格的第一列 if(!((i+1)<len)){ str="<tr>"; }else{ str=obj[o.pid].str==''?'':'<tr>'; obj[o.pid].l+=obj[o.id].l; } str+="<td rowspan='"+obj[o.id].l+"'>"+o.name+"</td><td rowspan='"+obj[o.id].l+"'>"+o.value+"</td>"; obj[o.pid].s+=obj[o.id].s; obj[o.pid].str+=(str+obj[o.id].str); } } } document.getElementById('table').innerHTML="<table>"+obj['000'].str+"</table>"; //i<d[arr[arr.length-1]].length } </script> </body> </html>
效果：
