合并单元格有多种实现方式 ,本文主采用的是 在数据层合并,然后在展示层(bootstrap)实现合并
原理是根据有规律的排序数据 然后在展示层根据数据行数 合并,这样的劣势是 数据一定要有规律 对于那些简单的需求的话 倒是可以用这种 有需要的朋友可以看我另一篇文章 >>> bootstrap 合并单元格之mergeCells属性合并
还有一种是比较灵活的 是事先处理好数据合并成一行,然后自己去展示层设计怎么展示,而且不用考虑分页问题 ,就是本文所介绍的
先看下效果吧
然后是我们所需要的数据格式 格式
拿上图所示 是根据商户ID 医院 汇总日期相同的多张表数据
[{orgName =xxxx, checkDate=20190423,merchantId=10086,payNum=0,payFee=0, refundFee=0,payNumT=0, payFeeT=0, refundFeeT=0},{orgName =xxxx, checkDate=20190423,merchantId=10086,payNum=0,payFee=0, refundFee=0,payNumT=0, payFeeT=0, refundFeeT=0},...]
然后bootstrap其他请求的属性我们就不写了 和平常的一样 重点是columns
var columns = [
[ {
field : 'merchantId',
title : '商户ID',
align : 'center',
colspan : 1,
rowspan : 2
}, {
field : 'orgName',
title : '医院',
align : 'center',
colspan : 1,
rowspan : 2
}, {
field : 'checkDate',
title : '汇总日期',
align : 'center',
colspan : 1,
rowspan : 2
}, {
title : '总交易单数',
align : 'center',
colspan : 2,
rowspan : 1
}, {
title : '总交易额',
align : 'center',
colspan : 2,
rowspan : 1
}, {
title : '总退款单数',
align : 'center',
colspan : 2,
rowspan : 1
}, {
title : '总退款金额',
align : 'center',
colspan : 2,
rowspan : 1
}, {
field : 'createTime',
title : '创建时间',
align : 'center',
colspan : 1,
rowspan : 2,
visible :false
}, {
title : '操作',
align : 'center',
colspan : 2,
rowspan : 1
} ],
[
{
field : 'payNum',
title : '平台总交易单数'
},
{
field : 'payNumT',
title : '第三方总交易单数'
},
{
field : 'payFee',
title : '平台总交易额'
},
{
field : 'payFeeT',
title : '第三方总交易额'
},
{
field : 'refundNum',
title : '平台总退款单数'
},
{
field : 'refundNumT',
title : '第三方总退款单数'
},
{
field : 'refundFee',
title : '平台总退款金额'
},
{
field : 'refundFeeT',
title : '第三方总退款金额'
},
{
title : '平台操作',
align : 'center'
},
{
title : '第三方操作',
align : 'center'
} ]];
然后这样的话也不用重新写分页,和正常的一样使用了,这是竖排合并,还可以横排合并 ,横排的话就是增加一个formatter,然后在里面增加样式 。