传统的做法 就是后台将数据排序一下，将有重复的数据放在一起，然后再遍历数据源
定好一个变量存放需要合并的依据（字段） 例如name 每一次遍历完就给name进行赋值 rows 渲染表格 一行一行的渲染
name 和 rowspan （记录合并的行数）
遍历 如果当前的字段不等于name的时候
将rowspan=1 正常遍历 正常拼接str
如果等于 name 这个时候就需要合并了
首先将 rowspan++ 然后找到 表格的合并的第一行 样属性rowspan的值设置为相加后的rowspan
代码：（19年12月12号 和张帆一起在刘工电脑上修改）
function initTable(rowData) { var rowspan = 1, _name = "", str = "", trIndex = 0, index_add = 0;; for (var i = 0; i < rowData.length; i++) { var data = rowData[i]; if (data.temp3 == 1) { if (data.name == _name) {//需要合并的情况 //将上一个的tr的rowspan重新赋值 rowspan++;//处理行合并用 index_add++;//序号 $("#tby .h-tbl tr:eq(-" + (rowspan - 1) + ") td:eq(1)").attr("rowspan", rowspan); //位置列合并 $("#tby .h-tbl tr:eq(-" + (rowspan - 1) + ") td:last").attr("rowspan", rowspan); //签名列合并 str = "<tr>" + "<td style='5%'>" + index_add + "</td>" + "<td style='6%'>" + data.name + "</td>" + "<td style='17%'>" + data.devCode + "</td>" + "<td style='11%'>" + data.lastData + "</td>" + "<td style='11%'>" + data.nowData + "</td>" + "<td style='11%'>" + data.e + "</td>" + "<td style='16.9%'>" + subVal(data.nowData, data.lastData, data.e) + "</td>" "</tr>"; } else { rowspan = 1; index_add++;//序号 str = "<tr>" + "<td style='5%'>" + index_add + "</td>" + "<td style='6%' rowspan=" + rowspan + ">" + data.site + "</td>" + "<td style='17%'>" + data.name + "</td>" + "<td style='11%'>" + data.devCode + "</td>" + "<td style='11%'>" + data.lastData + "</td>" + "<td style='11%'>" + data.nowData + "</td>" + "<td style='11%'>" + data.e + "</td>" + "<td style='11%'>" + subVal(data.nowData, data.lastData, data.e) + "</td>" + "<td style='16.9%' rowspan=" + rowspan + "></td>" "</tr>"; } _name = data.name; $("#tby .h-tbl").append(str); } } //setSlimScroll(); }
这种方法可以实现，但是通用性不是很好，渲染的效果也不是很好，因为表格是一行一行的进行渲染的，影响性能
解决办法：
可以将拼接好的数据一行一行的先放到一个数组中，然后统一用join转成字符串 直接一次性渲染，也方便查找索引 回头来修改 dom的rowspan
代码：
function initTable(rowData) { var rowspan = 1, _name = "", str = ["<colgroup>" + $("#thd").find('colgroup').html() + "</colgroup>"], //固定表头用 trIndex = 0, index_add = 0; for (var i = 0; i < rowData.length; i++) { var data = rowData[i]; var lastData = ""; var nowData = ""; var e = ""; if (data.lastData == undefined) { lastData = ""; e = ""; } else { lastData = data.lastData; e = data.e; } if (data.nowData == undefined) { nowData = ""; e = ""; } else { nowData = data.nowData; e = data.e; } var data_use = subVal(data.nowData, data.lastData, data.e); var money_use = calMoney(data_use, money); var data_f = calMoney(data.readEncode_f, data.e); var data_p = calMoney(data.readEncode_p, data.e); var data_g = calMoney(data.readEncode_g, data.e); if (data.class2 == _name) { rowspan++; //$("#tby .h-tbl tr:eq(-"+(rowspan-1)+") td:eq(1)").attr("rowspan",rowspan);//位置合并 var idxx = (str.length - 1) - (rowspan - 2) //根据规律 找到需要添加rowspan索引 //将上一个的tr的rowspan重新赋值 str[idxx] = $(str[idxx]).find("td:lt(2)").attr("rowspan", rowspan).parent()[0].outerHTML; //将rowspan设置回数组中（第一列和第二列） //index_add++; var _temp = "<tr>" + //"<td >"+index_add+"</td>"+ "<td >" + data.name + "</td>" + "<td >" + data.devCode + "</td>" + "<td >" + (data.e * 1).toFixed(0) + "</td>" + "<td >" + data_f + "</td>" + "<td >" + (data.price_f * 1).toFixed(2) + "</td>" + "<td >" + calMoney(data_f, data.price_f) + "</td>" + "<td >" + data_p + "</td>" + "<td >" + (data.price_p * 1).toFixed(2) + "</td>" + "<td >" + calMoney(data_p, data.price_p) + "</td>" + "<td >" + data_g + "</td>" + "<td >" + (data.price_g * 1).toFixed(2) + "</td>" + "<td >" + calMoney(data_g, data.price_g) + "</td>" + "<td >" + lastData + "</td>" + "<td >" + nowData + "</td>" + "<td >" + data_use + "</td>" + "</tr>"; str.push(_temp) } else { rowspan = 1; index_add++; str.push("<tr>" + "<td rowspan=" + rowspan + ">" + index_add + "</td>" + "<td rowspan=" + rowspan + ">" + data.class2 + "</td>" + "<td >" + data.name + "</td>" + "<td >" + data.devCode + "</td>" + "<td >" + (data.e * 1).toFixed(0) + "</td>" + "<td >" + data_f + "</td>" + "<td >" + (data.price_f * 1).toFixed(2) + "</td>" + "<td >" + calMoney(data_f, data.price_f) + "</td>" + "<td >" + data_p + "</td>" + "<td >" + (data.price_p * 1).toFixed(2) + "</td>" + "<td >" + calMoney(data_p, data.price_p) + "</td>" + "<td >" + data_g + "</td>" + "<td >" + (data.price_g * 1).toFixed(2) + "</td>" + "<td >" + calMoney(data_g, data.price_g) + "</td>" + "<td >" + lastData + "</td>" + "<td >" + nowData + "</td>" + "<td >" + data_use + "</td>" + "</tr>"); } _name = data.class2; //} } console.log(str) $("#tby .h-tbl").append(str.join("")); var headDom = $(".h-tbl")[0].outerHTML; var bodyDom = $(".h-tbl")[1].outerHTML; $("#flexHead").html(headDom); //渲染固定表头 getWHStyle(); //计算固定表头的宽度 $("#flexBody").html(bodyDom); } function getWHStyle() { var height = $("#tby").height() - 17; var flexWidth = 0; $("#thd").find('col').each(function(i, el) { var strWidth = this.attributes.style.nodeValue; if (i < 2) { flexWidth += strWidth.slice(strWidth.indexOf(":") + 1, strWidth.indexOf("p")) * 1; //计算固定表头宽度 } }) flexWidth += 2; //border宽度 $("#flexHead").css("width", flexWidth); $("#flexBody").css("height", height).css("width", flexWidth); }
1、张的表格根据数据有行合并的
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> #tbl{border-collapse:collapse;100%;height:500px} #tbl td,#tbl th{border:1px solid #ddd} </style> </head> <body> <table id="tbl"></table> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> var dataObj=[ {sname:'111',date:1,oilData:321,oilPdata:12,oilDifference:'12'}, {sname:'222',date:1,oilData:321,oilPdata:12,oilDifference:'12'}, {sname:'222',date:1,oilData:321,oilPdata:12,oilDifference:'12'}, {sname:'222',date:1,oilData:321,oilPdata:12,oilDifference:'12'}, {sname:'444',date:1,oilData:321,oilPdata:12,oilDifference:'12'} ] var str="",hstr="",bstr=""; //清空内容 $("#tbl").html(""); hstr="<thead><tr class='yel'><th>设备名称</th><th>日期</th><th>加油量</th><th>用油量</th><th>差值</th>",ulList="<li>设备名称</li><li>日期</li><li>加油量</li><li>用油量</li><li>差值</li>"; bstr="<tbody>"; var arry=new Array(); var oldName=''; for(var j=0;j<dataObj.length;j++){ if(dataObj[j].sname!==oldName){ arry[j]= "<tr>"+ "<td rowspan='1'>"+dataObj[j].sname+"</td>"+ "<td>"+dataObj[j].date+"</td>"+ "<td>"+dataObj[j].oilData+"</td>" + "<td>"+dataObj[j].oilPdata+"</td>"+ "<td>"+dataObj[j].oilDifference+"</td>"+ "</tr>"; }else{ arry[j]= "<tr>"+ "<td>"+dataObj[j].date+"</td>"+ "<td>"+dataObj[j].oilData+"</td>" + "<td>"+dataObj[j].oilPdata+"</td>"+ "<td>"+dataObj[j].oilDifference+"</td>"+ "</tr>"; var j_index=j-1; while(arry[j_index].indexOf('rowspan')==-1&&j_index>=0){ j_index--; } if(j_index>=0){ var nums=arry[j_index].split("rowspan='"); var n=parseFloat(nums[1]); if(isNaN(n)||!n){n=1} nums[1]=nums[1].replace(n,++n) arry[j_index]=nums.join("rowspan='"); } } oldName=dataObj[j].sname; } console.log(arry); bstr+=arry.join(''); bstr+="</tbody>"; str=hstr+bstr; $('ul.th-fixed').html(""); $('ul.th-fixed').html(ulList); $("#tbl").append(str); $('ul.th-fixed').each(function(index,ele){ setUlWidth($(ele),true); }); </script> </body> </html>
2、表格的导出的
http://112.95.161.37:8090/EMS/main.jsp
3、表格的倒序构建的
数据：
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'}, ];
4.时间节点空隙，检验24小时中间缺的部分，提示