单元格合并实现

效果图：查看附件
伪代码如下：

	 $('#reportTable').bootstrapTable({
		 method: 'POST',
		 cache: false,
//		 url:projectpath+"/certificate/kcgl2/queryPagedResult.do",
		 url:projectpath+"/certificate/zsph2/queryPagedResult.do",
         contentType: "application/x-www-form-urlencoded",
         dataType: "json",
         pagination: true, //是否显示分页（*）
         striped: false,//隔行换色
         sidePagination: 'server',//分页方式
         pageNumber: 1,//初始化table时显示的页码
         pageSize: 5,//每页条目                    
         pageList: [5, 10, 20, 50, 100],
         locale: 'zh-CN',
         sortable: true,//排序                    
         showColumns: true,//是否显示 内容列下拉框                    
         clickToSelect: false,//点击选中checkbox
         singleSelect: false,//启用单行选中                    
         showExport: true,//是否显示导出
         exportDataType: "all",//basic', 'all', 'selected'.
         queryParamsType: "", //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
         queryParams: function queryParams(params) {//设置查询参数   // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
             var param = {
                 pageNumber: params.pageNumber,
                 pageSize: params.pageSize,
             };
             return param;
         },
         columns:[
  			{title:'lch',field:"lch",title:"流程号",align:"center",valign:"middle",sortable:"true"},
  			{title:'sqdw',field:"sqdw",title:"申请单位",align:"center",valign:"middle",sortable:"true"},
  			{title:'lxr',field:"lxr",title:"联系人",align:"center",valign:"middle",sortable:"true"},
  			{title:'zslx',field:"zslx",title:"证书类型",align:"center",valign:"middle",sortable:"true"},
  			{title:'kszh',field:"kszh",title:"开始证号",align:"center",valign:"middle",sortable:"true"},
  			{title:'jszh',field:"jszh",title:"结束证号",align:"center",valign:"middle",sortable:"true"},
  			{title:'sfbj',field:"sfbj",title:"是否办结",align:"center",valign:"middle",sortable:"true"},
		],
		onLoadSuccess: function (data) {
			 mergeTable(data,"reportTable");     
		}
	});

	//全局变量 ***如果每次只是发送ajax请求对table进行局部更新，则每次要合并前前都应该清空这三个变量 不然全局变量会一值追加结果 
	var projNameIdCount="";
	var projNameCount="";
	var subProjNameCount="";
	//合并表格
	function mergeTable(data,tableId){
	    //每次合并表格前 都要将全局变量清空
		projNameIdCount="";
	    projNameCount="";
	    subProjNameCount="";
	    mergeCells(data.rows,0,data.rows.length,"lch",$('#'+tableId));
	    //对projName,subProjName,phase的次数进行分割
	    //去掉末尾的逗号 有时候也可以不用去掉 还是去掉了我这里
	    projNameIdCount = projNameIdCount.substring(0,projNameIdCount.length-1);
	    projNameCount = projNameCount.substring(0,projNameCount.length-1);
	    subProjNameCount = subProjNameCount.substring(0,subProjNameCount.length-1);
	    //console.log(projNameCount+"+"+subProjNameCount+"+"+phaseCount);
	    var strArr0 = projNameIdCount.split(",");
	    var strArr1 = projNameCount.split(",");
	    var strArr2 = subProjNameCount.split(",");
	    //根据次数进行表格合并
	    //合并lch
	    var index = 0;
	    for(var i=0;i<strArr0.length;i++){
	        var count = strArr0[i] * 1;
	        $('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"lch", colspan: 1, rowspan: count});
	        index += count;
	    }
	    //合并sqdw
	    var index = 0;
	    for(var i=0;i<strArr1.length;i++){
	        var count = strArr1[i] * 1;
	        $('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"sqdw", colspan: 1, rowspan: count});
	        index += count;
	    }
	    //合并lxr
	    var index = 0;
	    for(var i=0;i<strArr2.length;i++){
	        var count = strArr2[i] * 1;
	        $('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"lxr", colspan: 1, rowspan: count});
	        index += count;
	    }
	}
	function mergeCells(datas,startIndex,size,fieldName,target) {	//mergeCells(data.rows,0,data.rows.length,"selectqx",$('#'+tableId));
	    //console.log("startIndex:"+startIndex+"size:"+size+"---合并列:"+fieldName)
	    //声明一个数组计算相同属性值在data对象出现的次数和
	    //这里不能使用map，因为如果涉及到排序后，相同的属性并不是紧挨在一起,那么后面的次数会覆盖前面的次数，故这里用数组
	    var sortArr = new Array();
	    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 == "lch"){
	            var count = sortArr[prop] * 1;
	            projNameIdCount += count +",";
	        }
	        if(fieldName == "sqdw"){
	            var count = sortArr[prop] * 1;
	            projNameCount += count +",";
	        }

	        if(fieldName == "lxr"){
	            var count = sortArr[prop] * 1;
	            subProjNameCount += count +",";
	        }
	    }
	    for(var prop in sortArr){
	        if(prop == "indexOf"){
	            continue;
	        }
	        if(fieldName == "lch"){
	            startIndex = 0;
	            if(projNameCount.length>0){
	                var temp = projNameCount.substring(0,projNameCount.length-1);
	                var strArr1 = temp.split(",");
	                for(var i=0;i<strArr1.length;i++){
	                    var count = strArr1[i] * 1;
	                    startIndex += count;
	                }
	            }
	            if(sortArr[prop] >1){
	                mergeCells(datas,startIndex,startIndex+sortArr[prop],"sqdw",target);
	            }else{
	                //当projName的次数为1就不进入循环
	            	projNameCount +=1+",";
	            	subProjNameCount +=1+",";
	            }
	        }
	        if(fieldName == "sqdw"){
	            //console.log("进入projName--此时开始index-"+startIndex+"--结束index--"+(startIndex+sortArr[prop])*1);
	            startIndex = 0;
	            //subProjName每次进去的startIndex为前面次数的和
	            if(subProjNameCount.length>0){
	                //console.log("subProjNameCount-"+subProjNameCount);
	                var temp = subProjNameCount.substring(0,subProjNameCount.length-1);
	                var strArr1 = temp.split(",");
	                for(var i=0;i<strArr1.length;i++){
	                    var count = strArr1[i] * 1;
	                    startIndex += count;
	                }
	            }
	            if(sortArr[prop] >1){
	                mergeCells(datas,startIndex,startIndex+sortArr[prop],"lxr",target);
	            }else{
	                //当projName的次数为1就不进入循环
	                subProjNameCount +=1+",";
	                phaseCount +=1+",";
	            }
	        }
	     
	    }

	}