大家好，又见面了，我是你们的朋友全栈君。
bootstrap 合并单元格之mergeCells属性合并
合并单元格有多种实现方式 本文是根据bootstrap 自带的mergeCells属性实现的单元格合并，
原理是根据有规律的排序数据 然后在展示层根据数据行数 合并，这样的劣势是 数据一定要有规律 事先要排序
还有一种是比较灵活的 是事先处理好数据合并成一行，然后自己去展示层设计怎么展示，而且不用考虑分页问题 ，详情在 我的另一篇文章 bootstrap 合并单元格
很简单的合并 不过还要考虑分页问题 不过还是要注意排序 在请求返回数据时 必须保准需要的数据有规律的排序
代码语言：javascript复制onLoadSuccess: function (data) {
mergeCells(data, 1, $('.bootstrap-table'));
},onLoadSuccess 意思是数据加载成功时触发
代码语言：javascript复制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;
}
}然后我们来看看效果
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/125032.html原文链接：https://javaforall.cn
