bootstrap 合并单元格

合并单元格有多种实现方式  ，本文主采用的是 在数据层合并，然后在展示层（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，然后在里面增加样式 。