根据数据渲染表格、用数组的方式保存表格字符串（有行合并的） 张的表格倒序进行构建 固定表头 康和盛报表

传统的做法 就是后台将数据排序一下，将有重复的数据放在一起，然后再遍历数据源

定好一个变量存放需要合并的依据（字段）  例如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小时中间缺的部分，提示