大家好，又见面了，我是你们的朋友全栈君。
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;
}
}
然后我们来看看效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/125032.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...