signed

QiShunwang

“诚信为本、客户至上”

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

2021/4/26 13:12:48   来源:

文章目录

  • 前言
  • 一、Bootstrap Table介绍及官网文档?
  • 二、使用步骤
    • 1.效果
    • 2.使用说明


前言

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>