bootstrap-table 单元格合并方法

前面的话

最近做一个表格需要根据前边列的字段合并之后列的相同字段单元格，网上找到的都是ji基于单个列字段重复次数的合并，所以自己写了一个。

这是基于单个列字段合并的有错误的表格。

这个是正常的

定义表格

//表格列定义var columnlist=[{field:"GDSTITLE",title:"乡镇"},{field:"NAME2",title:"一级专项",formatter:function (value,row,index) {return '<span style="text-decoration: underline;cursor:pointer;font-style: italic">'+value+'</span>'}},{field:"NAME1",title:"二级专项",formatter:function (value,row,index) {return '<span style="text-decoration: underline;cursor:pointer;font-style: italic">'+value+'</span>'}},{field:"CATALOGNAME",title:"三级专项",formatter:function (value,row,index) {return '<span style="text-decoration: underline;cursor:pointer;font-style: italic">'+value+'</span>'}},{field:"NUM",title:"数量(个)"},{field:"AREA",title:"面积(公顷)"}];//表格参数var tableParams={data: data,sidePagination: "client",showFooter: false,showHeader: true,checkboxHeader: true,pagination: false, //是否显示分页（*）columns:columnlist,onClickCell: function(field, value, row, $cell) {},formatNoMatches: function() {return "对不起，没有查询到相关的数据...";},formatLoadingMessage: function() {return "请稍等，数据正在加载中...";}}$("#table").bootstrapTable(tableParams);mergeCells(data, "GDSTITLE", 1, $("#table")[0],[]);mergeCells(data, "NAME2", 1, $("#table")[0],["GDSTITLE"])mergeCells(data, "NAME1", 1, $("#table")[0],["GDSTITLE","NAME2"])mergeCells(data, "CATALOGNAME", 1, $("#table")[0],["GDSTITLE","NAME2","NAME1"]);

合并方法

/*** 合并行* @param data 原始数据（应在服务端完成排序）* @param fieldName 合并属性名称数组* @param colspan 列数* @param target 目标表格对象* @param upperLevelFieldname 该字段上一级的字段集合（合并格数不能超过上一字段）*/function mergeCells(data, fieldName, colspan, target,upperLevelFieldnameList) {if (data.length == 0) {return;}//初始化upperFieldValueListvar upperFieldValueList=[];upperLevelFieldnameList.forEach(function (item) {upperFieldValueList.push(data[0][item]);})data.push({"GDSTITLE":"","NAME2":"","NAME1":"","CATALOGNAME":""});//主要是给数据增加一行解决底部合并问题var numArr = [];var value = data[0][fieldName];var num = 0;for (var i = 0; i < data.length; i++) {debuggerif ((value != data[i][fieldName])|doCheck(data[i],upperLevelFieldnameList)) {numArr.push(num);value = data[i][fieldName];num = 1;continue;}num++;}var merIndex = 0;for (var i = 0; i < numArr.length; i++) {$(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })merIndex += numArr[i];}//用于检查是否相同，相同返回false不相同更新父类并返回truefunction doCheck(item,upperLevelFieldnameList) {var log=false;upperLevelFieldnameList.forEach(function (value,index) {if(upperFieldValueList[index] !=item[value]){log=true;upperFieldValueList[index]=item[value]};})return log;}}

数据

var data=[{"PROJID":"1","AREA":569.960000,"NUM":1,"GDSTITLE":"AA镇","CATALOGNAME":"矿山超期限开采","NAME1":"矿山违规开采问题","NAME2":"矿产资源专项"},{"PROJID":"1","AREA":692.560000,"NUM":1,"GDSTITLE":"BB镇","CATALOGNAME":"矿山超期限开采","NAME1":"矿山违规开采问题","NAME2":"矿产资源专项"},{"PROJID":"1","AREA":692.950000,"NUM":1,"GDSTITLE":"CC乡","CATALOGNAME":"矿山地质环境保护与治理","NAME1":"矿山恢复治理问题","NAME2":"矿产资源专项"},{"PROJID":"1","AREA":0.000000,"NUM":1,"GDSTITLE":"DD乡","CATALOGNAME":"矿山超期限开采","NAME1":"矿山违规开采问题","NAME2":"矿产资源专项"},{"PROJID":"1","AREA":66.410000,"NUM":2,"GDSTITLE":"EE镇","CATALOGNAME":"矿山超期限开采","NAME1":"矿山违规开采问题","NAME2":"矿产资源专项"},{"PROJID":"1","AREA":272.680000,"NUM":4,"GDSTITLE":"EE镇","CATALOGNAME":"禁采区违法采砂","NAME1":"非禁采期违法采砂","NAME2":"水资源专项"},{"PROJID":"1","AREA":0.000000,"NUM":1,"GDSTITLE":"EE镇","CATALOGNAME":"禁采区违法采砂","NAME1":"禁采期违法采砂","NAME2":"水资源专项"},{"PROJID":"1","AREA":0.000000,"NUM":3,"GDSTITLE":"FF镇","CATALOGNAME":"矿山超期限开采","NAME1":"矿山违规开采问题","NAME2":"矿产资源专项"}]