BootstrapTable使⽤1：合并表尾单元格⽂章⽬录
前⾔
Bootstrap Table使⽤记录
⼀、Bootstrap Table介绍及官⽹⽂档？
⼆、使⽤步骤
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',
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³',
js合并两个数组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="stackpath.bootstrapcdn/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1B uGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="use.fontawesome/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8N TSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="unpkg/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="code.jquery/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymo us"></script>
<script src="cdnjs.cloudflare/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRN XMRBu5WHdZYu1hA6ZOblgut
" crossorigin="anonymous"></script>
<script src="stackpath.bootstrapcdn/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls 7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="unpkg/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',
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。