项目小结（2）——bootStraptable动态合并单元格，前台打印加打印后的数据合并单元格

一、前台展示的相同的数据要进行单元格的合并

本身bootstrap table 中本身提供了动态合并单元格的方法

//合并表格
function mergeTable(data,tableId, fieldName){
    //每次合并表格前 都要将全局变量清空
    supplyNameCount = "";
    mergeCells(data.rows,0,data.rows.length,fieldName,$('#'+tableId));
    //对projName,subProjName,phase的次数进行分割
    //去掉末尾的逗号 有时候也可以不用去掉 还是去掉了我这里
    supplyNameCount = supplyNameCount.substring(0,supplyNameCount.length-1);
    var strArr1 = supplyNameCount.split(",");
    //根据次数进行表格合并
    //supplyName
    var index = 0;
    for(var i=0;i<strArr1.length;i++){
        var count = strArr1[i] * 1;
        $('#'+tableId).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: 1, rowspan: count});
        index += count;
    }

}

//排序后紧挨在一起 进行同名合并
/**
 * 此方法主要是先拿到每个同名属性的值的相等次数，把次数利用全局变量存下来
 *
 * @param datas --表格数据,一般为表格的rows数据
 * @param startIndex --开始下标
 * @param size --从开始下标起，到size结束，遍历合并多少个
 * @param fieldName --计算算哪个列
 * @param target --table表格对象
 */
function mergeCells(datas,startIndex,size,fieldName,target) {
    //声明一个数组计算相同属性值在data对象出现的次数和
    //这里不能使用map，因为如果涉及到排序后，相同的属性并不是紧挨在一起,那么后面的次数会覆盖前面的次数，故这里用数组
    var sortArr = [];
    for (var i = startIndex; i < size ; i++) {
        for (var j = i + 1; j < size; j++) {
            if (datas[i][fieldName] != datas[j][fieldName]){
                //相同属性值不同
                if (j - i > 1) {
                    sortArr.push(j - i);
                    i = j - 1;
                    //如果是最后一个元素 把最后一个元素的次数也装进去
                    if(i == size-1-1){
                        sortArr.push(1);
                    }
                }else{
                    sortArr.push(j - i);
                    //如果j是最后一个元素 把最后一个元素的次数装进去
                    if(j == size - 1){
                        sortArr.push(1);
                    }
                }
                break;

            }else {
                //相同属性值相同 直到最后一次的时候才会装 否则在他们的值不同时再装进去
                if (j == size - 1) {
                    sortArr.push(j - i+1);
                    //这里的赋值感觉有点多余 算了现就这个样子吧 不影响功能
                    i = j;
                }
            }
        }
    }
    //遍历数组，将值装追加到对应的字符串后面
    for(var prop in sortArr){
        /*这里在ie8上运行的时候 出现坑 最好遍历数组不要用for in 这里我用了就懒得换了
        下面加上如果prop是indexOf就停止 就解决了ie8出现的问题*/
        if(prop == "indexOf"){
            continue;
        }
        //根据项目实际添加的
        if(fieldName == "supplyName"|| fieldName == "deptName"|| fieldName == "deptCkCount"|| fieldName == "deptPriceSum"|| fieldName == "deptRkCount"|| fieldName == "deptRkPriceSum"){
            var count = sortArr[prop] * 1;
            supplyNameCount += count +",";
        }
    }
}

在该方法中进行合并单元格方法的引用

在该方法中进行方法的引用
onLoadSuccess: function(data){  //加载成功时执行
                console.log("当所有数据被加载时触发处理函数");
                    mergeTable(data,"bootstrap-table", _mergerField);
            },

可是傻傻的我，当时脑袋可能秀逗了，在自己的html页面中重写了方法onLoadSuccess 就是不成功，死活就是不知道咋回事。
通过console.log后发现，根本就没走我的方法，还是走的引用的js的文件。原因是后面$.table.init(options);加载后调用了js中，我写的根本不生效，后来只能写在js文件中了。
第二个问题是我要进行多个列中的行进行合并，可是这个方法就合并一个列啊
解决：多调用两次不久好了，当时也是不知道怎么想的，还在网上搜索了很多方法。

二、打印后也要单元格合并

首先要求的打印，是通过自己动态拼接html，进行打印要求每一页的最后要求出当前页的数量，价格的一些信息。具体做法：

1. 套了一个大循环，里面分别调用方法，进行内容，尾部，头部拼接
2. 计算相应数量。

可是到了动态单元格合并，row不是连续的每一页是连续的，这样的话应该怎么做呢，先贴出代码

// 合并(tab: table 自定义ID  maxCol：合并单元格作用到多少列)
    function tableRowspan(tab, maxCol) {
        var table =document.getElementById (tab);
        var val = "",
            count,
            start;
        for (var col = maxCol - 1; col >= 0; col--) {
            count = 1;
            for (var i = 0; i < table.rows.length; i++) {
                if (val == table.rows[i].cells[col].innerHTML) {
                    count++;
                } else {
                    if (count > 1) {
                        //合并
                        start = i - count;
                        table.rows[start].cells[col].rowSpan = count;
                        for (var j = start + 1; j < i; j++) {
                            table.rows[j].cells[col].style.display = "none";
                        }
                        count = 1;
                    }
                    val = table.rows[i].cells[col].innerHTML;
                }
            }

            if(count > 1 ) {
                //合并，最后几行相同的情况下
                start = i - count;
                table.rows[start].cells[col].rowSpan = count;
                for (var j = start + 1; j < i; j++) {
                    table.rows[j].cells[col].style.display = "none";
                }
            }
        }
    }

像我的情况通过每一页进行计算，那就循环每一页要合并的table，取其id进行循环合并，同时注意去掉不合并的行（如每页最后尾部计算数量的地方）
原方法

for (var i = 0; i < table.rows.length; i++) {

实际情况

for (var i = 3; i < table.rows.length-4; i++) {