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

全栈程序员站长

发布于 2022-08-03 09:43:11

2.4K0

发布于 2022-08-03 09:43:11

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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

然后我们来看看效果