Bootstrap-table使用footerFormatter做统计列功能
更新时间:2018年09月07日 16:38:55 作者:蚊蚊蚊蚊蚊170624
大家在做表格的时候,经常会做统计功能,其实统计也并没想想的这么复杂,实现起来很简单,接下来通过通过本文给大家介绍Bootstrap-table使用footerFormatter做统计列功能,需要的朋友可以参考下
写在前面:
在做表格的时候,难免会碰到做统计的时候。由于在项目中涉及到做统计的功能比较简单,之后也就没有过多的去研究更复杂的,这里简单记录下。
这次就直接先上图:一个简单的例子
看到效果图还是很好的,也比较的简单,下面看一下具体的代码实现,这里也就直接上代码了。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String scheme = request.getScheme(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); int port = request.getServerPort(); //网站的访问跟路径 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="http://ajax.googleapis.com/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 style=""> <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 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做统计列的实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- bootstrap-table组合表头的实现方法
- bootstrap-table实现表头固定以及列固定的方法示例
- bootstrap-table实现服务器分页的示例 (spring 后台)
- bootstrap-table+treegrid实现树形表格
- bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
- bootstrap-table formatter 使用vue组件的方法
- Bootstrap-table自定义可编辑每页显示记录数
- Node.js中Bootstrap-table的两种分页的实现方法
- Bootstrap table学习笔记(2) 前后端分页模糊查询
- bootstrap table 服务器端分页例子分享
- Bootstrap table分页问题汇总
- bootstrap-table后端分页功能完整实例
相关文章
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
在使用ionic开发ios系统微信的时候遇到一个bug,在填写表单的时候键盘会挡住输入框。下面小编给大家带来了ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题),非常不错,有需要的朋友参考下吧2016-09-09
最新评论