Bootstrap-表格合并单元格

最新推荐文章于 2024-01-20 16:06:00 发布
最新推荐文章于 2024-01-20 16:06:00 发布
阅读量218 收藏
点赞数
文章标签： javascript ViewUI

1、问题背景

利用Bootstrap设计表格，并且表格需要合并单元格


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta name="description" content="">
	    <meta name="author" content="">
	    <link rel="icon" href="js/bootstrap-3.3.5/docs/favicon.ico">
		<title>Bootstrap-表格合并单元格</title>
		<link rel="stylesheet" href="js/bootstrap-3.3.5/dist/css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap-3.3.5/dist/js/bootstrap.js" ></script>
		<style>
			body,html{
				width: 99%;
				height: 98%;
				font-family: "微软雅黑";
				font-size: 14px;
			}
			table{
				width: 100%;
			}
		</style>
		<script>
			
		</script>
	</head>
	<body>
		<div class="row">
			<div class="col-xs-12">
				<table class="table table-striped">
					<tr>
						<td>
							<label for="stuNo">学号：</label>
							<input type="text" id="stuNo" />
							<div class="btn-group" style="width: 157px; height: 26px;">
							   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 157px; height: 26px;">
							      	班级 
							   </button>
							   <ul class="dropdown-menu" role="menu">
							      <li><a href="#">一班</a></li>
							      <li><a href="#">二班</a></li>
							      <li><a href="#">三班</a></li>
							      <li><a href="#">四班</a></li>
							      <li><a href="#">五班</a></li>
							   </ul>
							</div>
							<button type="button" class="btn btn-primary">查询</button>
							<button type="button" class="btn">重置</button>
						</td>
					</tr>
				</table>
			</div>
			<div class="col-xs-12">
				<div class="col-xs-2">
					<table class="table table-striped table-bordered">
						<caption>学生表</caption>
						<thead>
							<tr>
								<th>学生</th>
								<th>学号</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>胡思</td>
								<td>2016010101</td>
							</tr>
							<tr>
								<td>赵四</td>
								<td>2016010102</td>
							</tr>
							<tr>
								<td>陈诚</td>
								<td>2016010103</td>
							</tr>
							<tr>
								<td>李磊</td>
								<td>2016010104</td>
							</tr>
							<tr>
								<td>孙杨</td>
								<td>2016010105</td>
							</tr>
							<tr>
								<td>李爽</td>
								<td>2016010106</td>
							</tr> 
						</tbody>
					</table>
					<table class="table table-striped table-bordered">
						<caption>学生表</caption>
						<thead>
							<tr>
								<th>学生</th>
								<th>学号</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>胡思</td>
								<td>2016010101</td>
							</tr>
							<tr>
								<td>赵四</td>
								<td>2016010102</td>
							</tr>
							<tr>
								<td>陈诚</td>
								<td>2016010103</td>
							</tr>
							<tr>
								<td>李磊</td>
								<td>2016010104</td>
							</tr>
							<tr>
								<td>游豪</td>
								<td>2016010105</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="col-xs-10">
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

3、实现结果


iteye_8264
关注
bootstrap表格列合并
10-17
bootstrap表格列合并，将要合并的单元格每四列进行合并！
Bootstrap 合并单元格
热门推荐
Ghjkku的博客
03-06 13万+
合并效果图 Bootstrap其他请求的属性我们就不写了 和平常的一样 重点是columns var columns = [ [ { field : 'merchantId', title : '商户ID', align : 'center', colspan : 1, rowspan : 2 }, { ...
bootstrap-table导出合并单元格
08-31
使用bootstrap-table客户端分页生成表格，导出表格按照单元格内容相同合并单元格
bootstrap合并单元格
liluo00000的博客
01-05 293
bootstrap合并单元格示例 前端代码： swagger转化jmeter工具 swagger文档地址: 解析swagger
bootstrap table实现合并单元格效果
10-17
总结起来，Bootstrap Table 提供的 `mergeCells` 方法为开发者提供了一种方便的方式来合并表格单元格，以适应各种数据展示需求。通过理解和运用这一功能，你可以创建更符合业务需求和用户体验的表格展示。
Bootstrap实现的表格合并单元格示例
11-29
本文实例讲述了Bootstrap实现的表格合并单元格。分享给大家供大家参考，具体如下： 1、问题背景 利用Bootstrap设计表格，并且表格需要合并单元格 2、实现源码 <!DOCTYPE html> <html> <head> <...
【bootstrap-table】在bootstrap-table的表格中合并单元格：含有父类的合并单元格，父类不同时子类相同也不合并
最新发布
lixiang_0531的博客
01-20 1165
今天遇到一个需求，简单来说就是合并单元格，但我实现时发现，要求其合并时，在国家相同的字段内才允许合并，遇见更复杂的需求，需要的父类可能为多个，所有我就在之前简单的合并单元格的方法基础上进行了部分修改。然后在表格设置中调用，方法如下。
bootstrap table合并单元格mergeCell
jaja_zz的博客
11-29 8268
//对应第一个合并的单元格 mergeCells = function(data, fieldName, colspan, target) { var sort = Array(); var num = 1; for (var i = 0; i < data.length - 1; i++) { for ( var p...
bootstrap-table-单元格动态合并(直接用就行)
BlackjunPJH的博客
06-08 1798
最近在开发项目的同时,出现的RuoYi 框架,需求是动态单元格合成,但是RuoYi虽然是基于bootstrap的,但是没有提供单元格合并的方法.
bootstrap table实现合并单元格效果(亲测有效)
bingmoujs的博客
05-11 1273
在bootstrapTable加载成功执行，如。
bootstrap 合并单元格
我是一只胖子丶的博客
04-24 5913
合并单元格有多种实现方式 ，本文主采用的是 在数据层合并，然后在展示层（bootstrap）实现合并 原理是根据有规律的排序数据然后在展示层根据数据行数 合并，这样的劣势是 数据一定要有规律 对于那些简单的需求的话 倒是可以用这种 有需要的朋友可以看我另一篇文章 >>> bootstrap 合并单元格之mergeCells属性合并 还有一种是比较灵活的 是事先...
bootstrapTable根据数据计算单元格 的合并问题
u013516755的博客
09-04 1918
BoostrapTable数据计算单元格的合并问题
bootstrap table 合并单元格
u014034656的博客
05-16 1514
/* *合并列相同的单元格，以第一列分组 *tableId 表格id *colList 要合并的列,以,分隔 例如 "modelId,modelIsp,modelProvinceid" */ var mergeCellsByField = function (tableID, colList) { var cols = colList.split(","); var tab
杂技随笔：BootstrapTable 合并单元格
Mr_chen的博客
06-11 1120
杂技随笔：BootstrapTable 合并单元格 前言 今天博主将为大家分享:杂技随笔：BootstrapTable 合并单元格，不喜勿喷，如有异议欢迎讨论！ 开始 在最近写代码时遇到了一个BootStarpTbale的合并单元格问题因此记录下来以便以后回看 JavaScript代码 /** * 合并单元格 * @param data 原始数据（在服务端完成排序） * @param ...
bootstrap table 数据合并单元格
那一年的博客
04-12 1387
原文地址:http://sigechuizi.cn/article/112
bootstrap-table方法之：合并单元格
11-16 878
方法一 通过mergeCells方法 演示地址：http://issues.wenzhixin.net.cn/bootstrap-table/methods/mergeCells.html Merge some cells to one cell, the options contains following properties:index: the row index.field...
react-bootstrap-table-next怎么合并单元格
05-31
要合并单元格，需要使用 `react-bootstrap-table-next` 中的 `rowSpan` 和 `colSpan` 属性。这些属性可以在 `columns` 对象中定义，用于指定表格中每个单元格应该跨越的行和列的数量。 具体的实现步骤如下： 1. 在 `columns` 对象中定义需要合并单元格的列，为其添加 `rowSpan` 和 `colSpan` 属性。 2. 在 `data` 数组中为需要合并单元格的行添加相应的属性值，这些属性值将在表格渲染时被引用。 下面是一个例子： ```javascript import BootstrapTable from 'react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; const columns = [ { dataField: 'id', text: 'ID', }, { dataField: 'name', text: 'Name', }, { dataField: 'age', text: 'Age', }, { dataField: 'gender', text: 'Gender', rowSpan: 2, // 跨越两行 }, { dataField: 'location', text: 'Location', colSpan: 2, // 跨越两列 }, { dataField: 'address', text: 'Address', hidden: true, // 隐藏该列 }, { dataField: 'city', text: 'City', }, { dataField: 'state', text: 'State', }, ]; const data = [ { id: 1, name: 'John', age: 30, gender: 'Male', location: 'New York', address: '123 Main St', city: 'New York', state: 'NY', }, { id: 2, name: 'Jane', age: 25, gender: 'Female', location: 'San Francisco', address: '456 Elm St', city: 'San Francisco', state: 'CA', }, ]; <BootstrapTable keyField='id' data={ data } columns={ columns }/> ``` 在上面的例子中，表格中的 `Gender` 列跨越了两行，`Location` 列跨越了两列。注意，在定义了 `colSpan` 属性的列后面应该添加相应数量的列来占据跨度。 希望这可以帮助你实现合并单元格的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值