bootstrap-table 相邻行 动态合并相同单元格

核心

基于bootStrapTable写好的合并函数。

$(target).bootstrapTable('mergeCells',{
	index:index,
	field:field,
	colspan:colspan,
	rowspan:rowspan
})

	**index:开始合并的坐标**
	**field:要合并的字段**
	**colspan:合并n列**
	**rowspan:合并n行**

设计思路:

  1. 用Map计数该 字段 相同内容出现的次数 count
  2. 用index 及出现次数计算出 合并所需的坐标
注:该设计暂只针对 相邻行 同行 合并。map只计次数。
例如:
-------------------
a		b		c
a		d		c
e		a		f
a		c		a
-------------------
合并后会变成
-------------------
 		b		c
a		d		c
		a		f
e		c		a
-------------------

##########         所以使用该设计 务必先将 要合并的字段排序  ############################

代码:

    core.mergeCells = function (data, fieldName, colspan, target) {
        if (data.length == 0) {
            alert("不能传入空数据");
            return;
        }
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = new Map();
        for (var i = 0; i < data.length; i++) {
            //计算出现次数
            //这里传参数时 使用数字[fieldName] 写法,用sortMap.fieldName 无法识别到,此时fieldName=‘fieldName’
            var key = data[i][fieldName];
            if (sortMap.has(key)) {
                sortMap.set(key, sortMap.get(key) * 1 + 1);
            } else {
                sortMap.set(key, 1);
            }
        }
        //计算角标,合并
        var index = 0;
        sortMap.forEach(function (item, key) {
            var count = sortMap.get(key);
            $(target).bootstrapTable('mergeCells', {
                index: index,
                field: fieldName,
                colspan: colspan,
                rowspan: count
            });
            index += count;
        })
    }

经过验证,该方法不存在翻页无效的问题

 在遍历map时,遇到了一个问题
 
//这样的写法不行,js有待回炉重造....
 for(var key in sortMap){
 	//key和sortMap的值均可以拿到
 	var count = 8;
 	//此方法内定义的变量均为undefiend
 	//且其中的方法无效
	}
该问题暂未想通,作为遗留。

你可能感兴趣的:(前端布局)