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 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
javascript常用代码段搜集
Dec 04 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
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
用libTemplate实现静态网页的生成
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
javascript call和apply方法
2008/11/24 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015中学教学工作总结
2015/07/22 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Python Matplotlib绘制条形图的全过程
2021/10/24 Python