bootstrap 合并单元格之mergeCells属性合并

bootstrap 合并单元格之mergeCells属性合并

合并单元格有多种实现方式  本文是根据bootstrap 自带的mergeCells属性实现的单元格合并，

原理是根据有规律的排序数据  然后在展示层根据数据行数 合并，这样的劣势是 数据一定要有规律  事先要排序

还有一种是比较灵活的 是事先处理好数据合并成一行，然后自己去展示层设计怎么展示，而且不用考虑分页问题 ，详情在 我的另一篇文章 bootstrap 合并单元格

很简单的合并 不过还要考虑分页问题   不过还是要注意排序 在请求返回数据时 必须保准需要的数据有规律的排序

onLoadSuccess: function (data) {
			mergeCells(data,  1, $('.bootstrap-table'));
		},

onLoadSuccess  意思是数据加载成功时触发

function mergeCells(data, colspan, target) {
    
    //设置初始行数
	var num =0;
	
    for (var i = 0; i < data.rows.length; i++) {
        //这其实就是bootstrap的mergeCells属性 自带的合并单元格
    	  $(target).bootstrapTable('mergeCells', {index: num, field: 'orgName', colspan: 1, rowspan: 2});
		  $(target).bootstrapTable('mergeCells', {index: num, field: 'merchantId', colspan: 1, rowspan: 2});
		  $(target).bootstrapTable('mergeCells', {index: num, field: 'checkDate', colspan: 1, rowspan: 2});
            //我这里是设置每两行合并
		  num =num+2;
     
    }
}

 

然后我们来看看效果