bootstrap 合并单元格

本文介绍了两种在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,然后在里面增加样式 。

### 回答1: Bootstrap Table可以通过设置rowspan和colspan属性来合并单元。具体操作如下: 1. 在表中设置需要合并的单元的rowspan和colspan属性,例如: ``` <table> <tr> <td rowspan="2">合并单元</td> <td>单元1</td> <td>单元2</td> </tr> <tr> <td colspan="2">单元3和单元4合并</td> </tr> </table> ``` 2. 在Bootstrap Table中使用mergeCells方法来合并单元,例如: ``` $('#table').bootstrapTable({ onPostBody: function() { $('#table').bootstrapTable('mergeCells', { index: , field: 'field1', rowspan: 2 }); $('#table').bootstrapTable('mergeCells', { index: , field: 'field2', colspan: 2 }); } }); ``` 其中,index表示需要合并的单元所在的行号,field表示需要合并的单元所在的列名,rowspan和colspan分别表示需要合并的行数和列数。 注意:使用mergeCells方法需要在表渲染完成后调用,可以在onPostBody事件中调用。 ### 回答2: Bootstrap table 是一个基于Bootstrap框架的表插件,它能够很方便地实现表的创建、编辑、排序、筛选等功能。在实际应用中,有时候需要将相邻的单元合并为一个单元,以提高表的可读性和美观性。下面来介绍一下如何使用 Bootstrap table 实现单元合并Bootstrap Table 支持通过设置 rowspan 和 colspan 来实现单元合并。其中,rowspan 表示要合并多少行,colspan 表示要合并多少列。具体的操作步骤如下: 1. 定义一个列的 formatter 函数,用于在表底部创建一个合并单元的按钮,点击按钮触发合并操作。 ``` function mergeCells() { var tds = $("#myTable tbody td"); tds.each(function(index, item) { var rowSpan, colSpan; rowSpan = $(item).attr("rowspan") || 1; colSpan = $(item).attr("colspan") || 1; $(item).addClass("merged").attr("rowSpan", rowSpan).attr("colSpan", colSpan); for (var i = 1; i < rowSpan; i++) { $(item).parent().next().children().eq(index).hide(); } for (var i = 1; i < colSpan; i++) { $(item).parent().children().eq(index + i).hide(); } }); } ``` 2. 定义一个表的初始化函数,用于创建表并设置一些列的属性,比如列头、数据源、formatter 函数等。 ``` $(function() { $('#myTable').bootstrapTable({ columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'address', title: 'Address' }, { field: 'phone', title: 'Phone', formatter: mergeCells } ], data: [{ id: '1', name: '张三', address: '北京市朝阳区', phone: '010-1234567' }, { id: '2', name: '李四', address: '上海市浦东新区', phone: '021-9876543' }, { id: '3', name: '王五', address: '广州市天河区', phone: '020-4567890' }, { id: '4', name: '赵六', address: '深圳市福田区', phone: '0755-1234567' } ] }); }); ``` 3. 在对应的表列中设置 formatter 函数,并在该函数中实现单元合并。具体实现过程如下: 上述代码中,循环遍历表的每个单元,获取该单元的 rowspan 和 colspan 属性,然后将其扩展为对应的行和列数,同时将其他需要合并的单元隐藏。最后,通过添加 merged 类来标识已经合并的单元。 以上就是使用 Bootstrap table 实现单元合并的方法,通过简单的设置就能实现表单元合并,提高表的可读性和美观性。 ### 回答3: Bootstrap Table是一款流行的开源插件,用于web开发中的表展示。在使用Bootstrap Table时,我们经常遇到需要合并中的单元的情况。本篇文章将详细介绍如何使用Bootstrap Table合并单元合并单元的方法: 1. 使用rowspan和colspan属性 在HTML中,我们可以使用rowspan和colspan属性来合并单元。在Bootstrap Table中,我们可以使用formatter函数来实现该功能。具体步骤如下: (1)定义需要合并的行和列的范围。 (2)在formatter函数中,判断是否需要合并当前单元。 (3)对于需要合并的单元,设置rowspan和colspan属性,并置空单元内容。 代码如下: ``` <table class="table" id="table"> <thead> <tr> <th data-field="name" rowspan="2">姓名</th> <th data-field="age" rowspan="2">年龄</th> <th data-field="sex" rowspan="2">性别</th> <th data-field="school" colspan="3">学校</th> </tr> <tr> <th data-field="primary">小学</th> <th data-field="middle">中学</th> <th data-field="high">高中</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> <td>学校1</td> <td>学校2</td> <td>学校3</td> </tr> <tr> <td>李四</td> <td>17</td> <td>女</td> <td rowspan="2" colspan="2"></td> <td>学校4</td> </tr> <tr> <td>王五</td> <td>16</td> <td>男</td> <td>学校5</td> </tr> </tbody> </table> <script> $(document).ready(function(){ $("#table").bootstrapTable({ //在formatter函数中实现单元合并 formatter: function (value, row, index, field) { //合并第二行中的第三列和第四列 if(index===1 && (field==="school" || field==="high" )){ return { rowspan:2, colspan:2, html:'', } } //合并第三行和第四行的第四列 if(index===2 && field==="high"){ return { rowspan:2, colspan:0, html:'', } } return value; } }); }); </script> ``` 在上述代码中,我们首先定义了表头和表中需要合并的行和列的范围,然后在formatter函数中,根据当前单元的位置,判断是否需要合并单元,如果需要就设置rowspan和colspan属性进行合并,并将单元内容置空。 2. 使用扩展的mergeCells插件 除了使用rowspan和colspan属性外,我们还可以使用Bootstrap Table的扩展插件mergeCells来实现单元合并。mergeCells插件是Bootstrap Table的一个常用插件,可以方便地对表单元进行合并和取消合并操作,而无需在HTML中设置rowspan和colspan属性。mergeCells插件提供了mergeCells(options)函数来实现单元合并,其中options是一个包含需要合并的单元信息的对象。 代码如下: ``` <table class="table" id="table"> <thead> <tr> <th data-field="name">姓名</th> <th data-field="age">年龄</th> <th data-field="sex">性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td rowspan="2" colspan="2"></td> <td>女</td> </tr> <tr> <td>16</td> <td>男</td> </tr> <tr> <td>赵六</td> <td>20</td> <td>女</td> </tr> </tbody> </table> <script src="bootstrap-table-merge-cells.js"></script> <script> $(document).ready(function(){ $("#table").bootstrapTable(); //调用mergeCells函数实现单元合并 $("#table").mergeCells({ index: 1, field: "age", colspan: 2 }); }); </script> ``` 在上述代码中,我们首先使用Bootstrap Table来定义表,然后使用mergeCells函数进行单元合并,其中index表示需要合并的行的索引,field表示需要合并的列的名称,colspan表示需要合并的列的数量。 需要注意的是,在使用mergeCells插件进行表单元合并时,必须在调用bootstrapTable函数后再使用该插件。否则会出现错误提示。 综上所述,以上两种方法都可以实现Bootstrap Table合并单元的功能,具体使用哪一种方法,主要取决于实际需求和个人习惯。无论是哪种方法,都要根据实际情况进行设置和调整,以达到最佳的显示效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值