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

程序员文章站 2022-10-08 11:29:46

写在前面：　　在做表格的时候，难免会碰到做统计的时候。由于在项目中涉及到做统计的功能比较简单，之后也就没有过多的去研究更复杂的，这里简单记录下。　　这次就直接先上图...

写在前面：

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

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

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做统计列的实例代码，希望对大家有所帮助

上一篇： flash中制作遮罩层和传统补间动画有什么区别?

下一篇： AI利用分别变换工具制作漂亮的花瓣