bootstrap 合并单元格

最新推荐文章于 2025-06-07 08:28:40 发布

原创最新推荐文章于 2025-06-07 08:28:40 发布 · 5.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap合并单元格 #bootstrap数据合并 #Springboot数据合并

Java 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了两种在Bootstrap中实现表格单元格合并的方法。第一种是在数据层合并，依赖数据的规律性；第二种是预处理数据，使合并更灵活，且不受分页影响。通过示例展示了如何设置数据格式和Bootstrap的columns属性来实现合并，同时提到了横排合并的实现，通过formatter添加样式完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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