Bootstrap Table使用1：合并表尾单元格

最新推荐文章于 2023-02-03 11:53:51 发布
最新推荐文章于 2023-02-03 11:53:51 发布
阅读量997 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KeleQAQ/article/details/116150581
版权

文章目录

前言

Bootstrap Table使用记录

一、Bootstrap Table介绍及官网文档？

https://www.bootstrap-table.com.cn/doc/getting-started/introduction/

二、使用步骤

1.效果

（使用前首先根据官网导入基本样式和js文件）

表头和表尾，未添加数据

2.使用说明

代码如下(这里没有使用数据填充表格体，所有中间显示No matching …)：

<!-- 首先定义一个div，这里通过JavaScript调用带有id表的bootstrap Table。-->
<table id="table"></table>

<!--  js代码 -->
<script>
		
		$('#table').bootstrapTable({
			showFooter:true,	///设置true 为显示摘要页脚行。
			
			/*
			columns:列，为表格头，类型:Array，里面存放对象。这里表头有两行，所以在columns数组里又
			存了2个数组：类似 二维数组 [  [ 对象，... ] , [ 对象, ... ]  ]
			*/
			columns:[	
				[{
					field: 'siteName',
					title: '站点名称',
					align: 'center',
					valign: 'middle',	//指出如何对齐单元格数据'top', 'middle', 'bottom' 都可以使用。
					colspan: 1,	//指示单元格应占用的列数。
					rowspan: 2	,//指示单元格应占用的行数。
					footerFormatter: function(data){	//该函数应返回一个字符串，其中包含要在页脚单元格中显示的文本。
						return "标准值"
					}
				},
				{
					field: 'reportTime',
					title: '监测时间',
					align: 'center',
					valign: 'middle',
					colspan: 1,	
					rowspan: 2	
				},
				{
					title: 'PM10',
					align: 'center'
				},
				{
					title: 'PM2.5',
					align: 'center'
				},
				{
					title: 'NO2',
					align: 'center'
				},
				{
					title: 'O3',
					align: 'center'
				},
				{
					title: 'SO2',
					align: 'center'
				},
				{
					title: 'CO',
					align: 'center'
				}],
				
				[{
					field: 'pm10',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 150 "
					}
				},{
					field: 'pm25',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 75 "
					}
				},{
					field: 'no2',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 80 "
					}
				},{
					field: 'o3',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 160 "
					}
				},{
					field: 'so2',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 150 "
					}
				},{
					field: 'co',
					title: 'mg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 4 "
					}
				}]
				
			],
			
			onPostBody:function (){ //在表体呈现并在DOM中可用之后触发
				//合并页脚
				merge_footer();
			}
			
		})
		
		
		//合并页脚
		function merge_footer() {
		    //获取table表中footer 并获取到这一行的所有列
		    var footer_tbody = $('#table tfoot');
		    var footer_tr = footer_tbody.find('tr');
		    var footer_th = footer_tr.find('th');
		    
			//隐藏footer的第2列，下标是1
		    footer_th.eq(1).hide();
		    
		    //设置设置第1列跨列，距离是2列。下标是0
			var footer_th_1 = footer_th.eq(0);
		    footer_th_1.attr('colspan', 2).show();
		    //这里可以根据自己的表格来设置列的宽度 使对齐
		    //footer_th_1.attr('width', "60px").show();
		}
		
	</script>

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
	
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
	<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
  </head>
  <body>
	<!-- 通过JavaScript调用带有id表的bootstrap Table。-->
	<table id="table"></table>

	<script>
		$('#table').bootstrapTable({
			showFooter:true,	///设置true 为显示摘要页脚行。

			columns:[	//columns:列，为表格头。类型:Array
				[{
					field: 'siteName',
					title: '站点名称',
					align: 'center',
					valign: 'middle',	//指出如何对齐单元格数据'top', 'middle', 'bottom' 都可以使用。
					colspan: 1,	//指示单元格应占用的列数。
					rowspan: 2	,//指示单元格应占用的行数。
					footerFormatter: function(data){	//该函数应返回一个字符串，其中包含要在页脚单元格中显示的文本。
						return "标准值"
					}
				},
				{
					field: 'reportTime',
					title: '监测时间',
					align: 'center',
					valign: 'middle',
					colspan: 1,	
					rowspan: 2	
				},
				{
					title: 'PM10',
					align: 'center'
				},
				{
					title: 'PM2.5',
					align: 'center'
				},
				{
					title: 'NO2',
					align: 'center'
				},
				{
					title: 'O3',
					align: 'center'
				},
				{
					title: 'SO2',
					align: 'center'
				},
				{
					title: 'CO',
					align: 'center'
				}],
				
				[{
					field: 'pm10',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 150 "
					}
				},{
					field: 'pm25',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 75 "
					}
				},{
					field: 'no2',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 80 "
					}
				},{
					field: 'o3',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 160 "
					}
				},{
					field: 'so2',
					title: 'μg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 150 "
					}
				},{
					field: 'co',
					title: 'mg/m³',
					align: "center",
					footerFormatter: function(data){
						return " 4 "
					}
				}]
				
			],
			
			onPostBody:function (){
				//合并页脚
				merge_footer();
			}
			
		})
		
		//合并页脚（使用到了jquery）
		function merge_footer() {
		    //获取table表中footer 并获取到这一行的所有列
		    var footer_tbody = $('#table tfoot');
		    var footer_tr = footer_tbody.find('tr');
		    var footer_th = footer_tr.find('th');
		    
			//隐藏footer的第2列，下标是1
		    footer_th.eq(1).hide();
		    
		    //设置设置第1列跨列，距离是2列。下标是0
			var footer_th_1 = footer_th.eq(0);
		    footer_th_1.attr('colspan', 2).show();
		    //这里可以根据自己的表格来设置列的宽度 使对齐
		    //footer_th_1.attr('width', "60px").show();
		}
		
	</script>
	
  </body>
</html>
KeleQAQ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap table footerFormatter合并单元格
tpc1990519的专栏
01-11 1万+
首先开启表格页脚 showFooter: true, 其次在列参数中添加footerFormatter { field: 'state', radio: true, align: 'center', valign: 'middle', footerFormatter:function (data) { return "平均分
Bootstrap table footer 合并/合计
HFUT_SIAS的博客
09-28 1万+
Bootstrap table footer 合并/合计 序言 这是我的第一篇博客，我是个技术小菜，但是喜欢研究一些技术的东西，欢迎大家沟通交流。这篇博客主要讲我开发的一个项目中客户要求在一些分析报表下要有指标合计值。我前端用的是bootstrap table，但是发现其虽然支持footer扩展，但是在合并单元格时存在一些问题。网上资料也不够全，经过自己研究，解决实现了。 效果 废话不多说，先上效...
Table 表格 表头表尾浮动显示
12-10
网络下载后的资源，进行改造后，实现单行多行，表头表尾浮动显示。
对bootstarp的footerFormatter进行合并
qq_54378364的博客
02-03 280
对bootstarp的footerFormatter进行合并
bootstrapTable通过rowspan/colspan合并单元格
Mart1nn的博客
08-20 1万+
行列数量、名称已经确定 入门版本 <!--数据展现部分--> <table id="table"> </table> <script> $("#table").bootstrapTable({ columns: [ [ {'title': '', 'colspan':2}, {'title': '综合', 'c...
div搜索框与按钮不在一行_微信小程序自定义日历组件及flex布局最后一行对齐问题分析...
weixin_39878401的博客
11-21 423
本文为作者行舟客投稿，原文地址：https://yunxiaomeng.blog.csdn.net/article/details/108821829欢迎点赞！背景最近为我开源的小项目：微信小程序扩展自定义组件库(点击去GitHub) 增加了一个新组件 —— 日历组件。正文在编写过程中，因为大家都知道，日历组件是有固定行数和每一行的固定列数的(即使当前方块内没有值)，所以结合小程序“数...
bootstrap table实现合并单元格效果
10-17
本文将详细讨论如何使用 Bootstrap Table 实现单元格的合并功能。 首先，我们需要了解 `mergeCells` 这个方法。`mergeCells` 是 Bootstrap Table 提供的一个功能，用于合并指定的单元格。在提供的代码示例中，可以...
bootstrap table实现横向合并与纵向合并
10-16
它通过遍历表格中的每一行，检查特定列（field）中的内容是否相同，如果相同，则将这些单元格合并。`colspan` 参数定义了单元格跨越的列数，而 `rowspan` 参数则定义了单元格跨越的行数。 2. **纵向合并**： 纵向...
bootstrap-table导出合并单元格
08-31
Bootstrap Table是一款基于...通过以上步骤，我们就能在使用Bootstrap Table时实现导出合并单元格的功能，提高数据展示的效率和质量。在实际开发中，可以根据项目需求调整和定制这些方法，以满足更复杂的需求。
bootstrapTable-treeView：treeView的bootstrapTable扩展
02-05
TreeView演示注意数据中必须包含parentId属性，根节点parentId=null ，子例程中根据配置的parentId == options[treeId] 。例如配置项\u4e2dtreeId='id' ，那么子上游的parentId属性将父父的id 数据必须包含parentId...
bootstrap表格列合并
10-17
bootstrap表格列合并，将要合并的单元格每四列进行合并！
jqGrid表格底部汇总、合计行footerrow处理
10-16
主要为大家详细介绍了jqGrid表格底部汇总、合计行footerrow处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap table实现单击单元格可编辑功能
08-31
《Bootstrap Table实现单击单元格可编辑功能详解》 Bootstrap Table 是一款基于Bootstrap框架的响应式表格插件，它提供了一系列强大的功能，如排序、筛选、分页等。而通过结合x-editable插件，我们可以进一步实现...
bootstrap-table对所有列footerFormatter求总和；根据数据隐藏列；隐藏列时footerFormatter页脚无法正常显示
weixin_54948071的博客
06-23 1550
bootstrap-table对所有列footerFormatter求总和；根据数据隐藏列；隐藏列时footerFormatter页脚无法正常显示；
【前端笔记】BootStarp的table属性跨行跨列后无法居中
qq_33277249的博客
11-12 1188
解决问题 引用BootStarp的table属性跨行跨列后无法居中。 html代码如下（table为bootstarp属性）： <head> <link rel="stylesheet" href="./bootstrap.css"> <style> td { text-align: center; ...
bootstrap-table合并单元格组合表头
sotong006的专栏
07-17 5955
先看效果 html代码 先请大家看一下这篇文章的说明 内容基本上吧合并单元格的教程说明白了。 其实这里主要的区别就在于平时我们大多数使用的是一维数组 现在我们使用到的是二维数组 其中除了对应的数据列。其他定义的作为表头。 比如我们用如下的数据结构； 说明：这里用到了二维数组 数组里的第一个数组 用来 定义表头。 第二个数
支持动态添加列，多行Title的bootstrapTable
ckk_0821的专栏
04-30 3119
支持动态添加列，多行Title的bootstrapTable
bootstrap table footerFormatter用法 统计列求和 sum、average等
热门推荐
princeLLM的博客
04-08 2万+
其实上一篇blog里已经贴了代码，简单解释一下吧： 1、showFooter: true,很重要，设置footer显示： $(cur_table).bootstrapTable({ url: '/etestpaper/getPaperQType', method: 'get', queryParams: {strParentID: parentid}, aja
简单随笔——如何在gridview的页脚显示信息。。。。
weixin_30642561的博客
02-10 122
我是超级大菜鸟。。。哈哈 先上图看看是不是你需要的 第一步，右击gridview，在事件中，单击RowdataBond事件。 在这之前一定要记得在gridview属性中的ShowFooter设置为“true”。 第二步，需要实现这个功能可以看看我的代码。 1 protected void GridView1_RowDataBound(object sende...
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` 属性的列后面应该添加相应数量的列来占据跨度。 希望这可以帮助你实现合并单元格的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值