Bootstrap-table使⽤footerFormatter做统计列功能
写在前⾯：
在做表格的时候，难免会碰到做统计的时候。由于在项⽬中涉及到做统计的功能⽐较简单，之后也就没有过多的去研究更复杂的，这⾥简单记录下。 这次就直接先上图：⼀个简单的例⼦
看到效果图还是很好的，也⽐较的简单，下⾯看⼀下具体的代码实现，这⾥也就直接上代码了。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String scheme = Scheme();
String serverName = ServerName();
String contextPath = ContextPath();
int port = ServerPort();
//⽹站的访问跟路径
String baseURL = scheme + "://" + serverName + ":" + port
+ contextPath;
request.setAttribute("baseURL", baseURL);
System.out.println("baseURL:" + baseURL);
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<%--设置IE渲染⽅式(⽂档)默认为最⾼(这部分可以选择添加也可以不添加)--%>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Work Members</title>
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" />
<link href="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.css" rel="external nofollow" rel="stylesheet" />
<link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="external nofollow" rel="stylesheet" />
<link href="${baseURL}/Bootstrap/bootstrap-dialog/css/bootstrap-dialog.css" rel="external nofollow" rel="stylesheet" />
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-2.0.3.min.js"></script>
<!--[if IE]>
<!--<script src="leapis/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
<script src="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.js"></script>
<style type="text/css">
table,table tr th, table tr td {
border:1px solid #fac090;
}
/
*解决设置表头列宽⽆效*/
#table{
table-layout: fixed;
}
</style>
</head>
<body >
<div >
<table id="table_showMembers"></table>
</div>
</body>
<script type="text/javascript">
$(function () {
var table_showMembers = $('#table_showMembers').bootstrapTable({
url: '${baseURL}/listProjectWorkItemAssignmentByProjAndWorkItemId?projId=151&workItemId=1',
method: 'get',//请求⽅式（*）
toolbar: '#toolbar',//⼯具按钮⽤哪个容器
striped: true,//是否显⽰⾏间隔⾊
cache: false,//是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*）
pagination: false,//是否显⽰分页（*）
sortable: false,//是否启⽤排序
sortOrder: "asc",//排序⽅式
queryParams: function (params) {//⾃定义参数，这⾥的参数是传给后台的，我这是是分页⽤的
return {//这⾥的params是table提供的
startIndex: params.offset,//从数据库第⼏条记录开始
pageSize: params.limit//每页记录数
};
},//传递参数（*）
sidePagination: "server",//分页⽅式：client客户端分页，server服务端分页（*）
pageNumber: 1,//初始化加载第⼀页，默认第⼀页
pageSize: 1,//每页的记录⾏数（*）
pageList: [2, 4, 6, 8],//可供选择的每页的⾏数（*）
// search: true,//是否显⽰表格搜索，此搜索是客户端搜索，不会进服务端
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
//showColumns: true,//是否显⽰内容列下拉框
//showRefresh: true,//是否显⽰刷新按钮
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//是否启⽤点击选中⾏
//height: 700,//⾏⾼，如果没有设置height属性，表格⾃动根据记录条数觉得表格⾼度
width:'50%',
uniqueId: "hrPerCode",//每⼀⾏的唯⼀标识，⼀般为主键列
//showToggle: true,//是否显⽰详细视图和列表视图的切换按钮
cardView: false,//是否显⽰详细视图
detailView: false,//是否显⽰⽗⼦表
checkboxHeader :true, //隐藏表头的checkbox
bootstrap项目singleSelect: false, //开启单选
showFooter:true, //开启底部
columns: [
{
field: 'perCode',
title: '⼯號',
valign:'middle',
align:'center',
visible:true, //隐藏列
width:'100px',
footerFormatter: function(value){
return "Total Work item hours ";
}
},
{
field: 'perName',
title: '姓名',
align:'center',
width:'150px',
},
{
field: 'hasWorkedHours',
title: 'Invested hours',
align:'center',
width:'80px',
formatter: function(value,row,index){
return row.hasWorkedHours+"H";
},
//计算此列的值
footerFormatter: function(rows){
var sum = 0;
for (var i=0;i<rows.length;i++) {
sum += rows[i].hasWorkedHours
}
return sum+"H";
}
},
],
onPostBody:function () {
//合并页脚
merge_footer();
}
});
});
//合并页脚
function merge_footer() {
//获取table表中footer 并获取到这⼀⾏的所有列
var footer_tbody = $('.fixed-table-footer table tbody');
var footer_tr = footer_tbody.find('>tr');
var footer_td = footer_tr.find('>td');
var footer_td_1 = footer_td.eq(0);
//由于我们这⾥做统计只需要两列，故可以将除第⼀列与最后⼀列的列全部隐藏，然后再设置第⼀列跨列
//遍历隐藏中间的列下标从1开始
for(var i=1;i<footer_td.length-1;i++) {
footer_td.eq(i).hide();
}
//设置跨列
footer_td_1.attr('colspan', footer_td.length-1).show();
//这⾥可以根据⾃⼰的表格来设置列的宽度使对齐
footer_td_1.attr('width', "910px").show();
}
</script>
</html>
总结
以上所述是⼩编给⼤家介绍的Bootstrap-table使⽤footerFormatter做统计列的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论