bootstrap-table合并单元格，支持多列

最近项目有个需求，要求将表格中相同的内容合并。
表格用的是bootstrap-table，本想找个现成的，但是网上搜搜了，原生的只有合并固定行数的，不符合。也有人分享了动态计算的，但只合并了一列，不符合。

function merge(fieldName,target) {
  //声明一个map计算相同属性值在data对象出现的次数和
  var sortMap = {};
  for(var i = 0; i < data.length; i++){
    var key = data[i][fieldName];
    if(sortMap.hasOwnProperty(key)){
      sortMap[key] = sortMap[key] * 1 + 1;
     } else {
       sortMap[key] = 1;
     }
   }
   var index = 0;
   for(var prop in sortMap){
     var count = sortMap[prop] * 1;
     $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: 1, rowspan: count});   
     index += count;
  }
}

后来想到多列的情况，如第二列，应该要按照第一列、第二列组合数据，来做合并的，那实际就是相当于把第一列和第二列的数据合并作为一个整体，再做动态合并，也就是说合并一列就行了。那么就把合并一列的算法，多次调用就行了。第一次合并1…n列，第二次合并1…n-1列……一直到合并1列，列名可以用数组，正好jquery的方法pop能满足列名的循环减少。修改方法如下

function merge(fields,target) {
  //声明一个map计算相同属性值在data对象出现的次数和
  var sortMap = {};
  for(var i = 0; i < data.length; i++){
    var key = "";
    for (var f = 0; f < fields.length; f++) {
      key = key + "#" + data[i][fields[f]];
    }
    if(sortMap.hasOwnProperty(key)){
      sortMap[key] = sortMap[key] * 1 + 1;
    } else {
      sortMap[key] = 1;
    }
  }
  var index = 0;
  var fieldName = fields[fields.length - 1];
  for(var prop in sortMap){
    var count = sortMap[prop] * 1;
    $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: 1, rowspan: count});   
    index += count;
  }
}

再次完善一下，为了方便调用，改成Jquery插件。源代码见https://gitee.com/chenjerome/bootstrap-table-merge-cells

先来个原始表格的图

再来个效果图