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 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
Vue.js中的组件系统
May 30 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php 生成随机验证码图片代码
2010/02/08 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
js循环改变div颜色具体方法
2013/06/25 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
学生会部长竞聘书
2014/03/31 职场文书
交通事故协议书范本
2014/11/18 职场文书
法院答辩状格式
2015/05/22 职场文书
小学运动会前导词
2015/07/20 职场文书
中学团支部工作总结
2015/08/13 职场文书