Bootstrap-table使用footerFormatter做统计列功能


Posted in Javascript onSeptember 07, 2018

写在前面:

在做表格的时候,难免会碰到做统计的时候。由于在项目中涉及到做统计的功能比较简单,之后也就没有过多的去研究更复杂的,这里简单记录下。

这次就直接先上图:一个简单的例子

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做统计列的实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
微信JSSDK上传图片
Aug 23 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
JS中的多态实例详解
Oct 15 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 #Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 #Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 #Javascript
Vue中使用sass实现换肤功能
Sep 07 #Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
js中this的用法实例分析
2015/01/10 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python实现装饰器、描述符
2018/02/28 Python
Selenium的使用详解
2018/10/19 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python实现移动木板小游戏
2020/10/09 Python
python实现简单文件读写函数
2021/02/25 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
自我推荐信怎么写
2015/03/24 职场文书
中学总务处工作总结
2015/08/12 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
PyTorch中的torch.cat简单介绍
2022/03/17 Python
Nginx速查手册及常见问题
2022/04/07 Servers
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技