bootstrap-table 动态合并行和列方法

最新推荐文章于 2023-04-21 15:42:18 发布

weixin_34283445

最新推荐文章于 2023-04-21 15:42:18 发布

阅读量1.6k

点赞数

原文链接：http://www.cnblogs.com/sunzhihua/p/10747040.html

版权

$( "#table2").bootstrapTable({

url: "http://...",

columns: [],

                onLoadSuccess: 
   function (data) { 
  
                    mergeCells(data, 
   "FDepName3", 1, $('#table2'));//行合并 
  
                    mergeColspan(data, [ 
   "FDepName3", "FDepName1", "FDepName2"], $('#table2'));//列合并 
  
                }, 
  
    })

/**

* 合并行

* @param data 原始数据（在服务端完成排序）

* @param fieldName 合并属性名称数组

* @param colspan 列数

* @param target 目标表格对象

function mergeCells(data, fieldName, colspan, target) {

if (data.length == 0) {

alert( "不能传入空数据");

return;

}

var numArr = [];

var value = data[0][fieldName];

var num = 0;

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

if (value != data[i][fieldName]) {

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];

}

 
   /** 
  
   * 合并列 
  
   * @param data  原始数据（在服务端完成排序） 
  
   * @param fieldName 合并属性数组 
  
   * @param target    目标表格对象 
  
   */ 
  
   function mergeColspan(data, fieldNameArr, target) { 
  
   if (data.length == 0) { 
  
                    alert( 
   "不能传入空数据"); 
  
   return; 
  
                } 
  
   if (fieldNameArr.length == 0) { 
  
                    alert( 
   "请传入属性值"); 
  
   return; 
  
                } 
  
   var num = -1; 
  
   var index = 0; 
  
   for (var i = 0; i < data.length; i++) { 
  
                    num++; 
  
   for (var v in fieldNameArr) { 
  
                        index = 
   1; 
  
   if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) { 
  
                            index = 
   0; 
  
   break; 
  
                        } 
  
                    } 
  
   if (index == 0) { 
  
   continue; 
  
                    } 
  
                    $(target).bootstrapTable( 
   'mergeCells', { index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1 }); 
  
                } 
  
    } 
  
    -------------------------- 
  
     /** 
    
     * 合并单元格 
    
     * @param data 原始数据（在服务端完成排序） 
    
     * @param fieldName 合并属性名称 
    
     * @param colspan  合并列 
    
     * @param target  目标表格对象 
    
     */ 
    
     function 
     mergeCells(data,fieldName,colspan,target){ 
    
     //声明一个map计算相同属性值在data对象出现的次数和 
    
     var 
     sortMap = {}; 
    
     for 
     ( 
     var 
     i = 0 ; i < data.length ; i++){ 
    
     for 
     ( 
     var 
     prop  
     in 
     data[i]){ 
    
     if 
     (prop == fieldName){ 
    
     var 
     key = data[i][prop] 
    
     if 
     (sortMap.hasOwnProperty(key)){ 
    
     sortMap[key] = sortMap[key] * 1 + 1; 
    
     }  
     else 
     { 
    
     sortMap[key] = 1; 
    
     } 
    
     break 
     ; 
    
     }  
    
     } 
    
     } 
    
     for 
     ( 
     var 
     prop  
     in 
     sortMap){ 
    
     console.log(prop,sortMap[prop]) 
    
     } 
    
     var 
     index = 0; 
    
     for 
     ( 
     var 
     prop  
     in 
     sortMap){ 
    
     var 
     count = sortMap[prop] * 1; 
    
     $(target).bootstrapTable( 
     'mergeCells' 
     ,{index:index, field:fieldName, colspan: colspan, rowspan: count});   
    
     index += count; 
    
     } 
    
     }