溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Bootstrap-table使用footerFormatter做統(tǒng)計(jì)列功能

發(fā)布時(shí)間：2020-10-04 16:04:03 來源：腳本之家 閱讀：161 作者：蚊蚊蚊蚊蚊170624 欄目：web開發(fā)

寫在前面：

　　在做表格的時(shí)候，難免會(huì)碰到做統(tǒng)計(jì)的時(shí)候。由于在項(xiàng)目中涉及到做統(tǒng)計(jì)的功能比較簡單，之后也就沒有過多的去研究更復(fù)雜的，這里簡單記錄下。

　　這次就直接先上圖：一個(gè)簡單的例子

Bootstrap-table使用footerFormatter做統(tǒng)計(jì)列功能

　　看到效果圖還是很好的，也比較的簡單，下面看一下具體的代碼實(shí)現(xiàn)，這里也就直接上代碼了。

<%@ 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();
 //網(wǎng)站的訪問跟路徑
 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" />
 <%--設(shè)置IE渲染方式(文檔)默認(rèn)為最高(這部分可以選擇添加也可以不添加)--%>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Work Members</title>
 <!--圖標(biāo)樣式-->
 <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;
  }
  /*解決設(shè)置表頭列寬無效*/
  #table{
   table-layout: fixed;
  }
 </style>
</head>
<body >
<div >
 <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',//請(qǐng)求方式（*）
      toolbar: '#toolbar',//工具按鈕用哪個(gè)容器
      striped: true,//是否顯示行間隔色
      cache: false,//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
      pagination: false,//是否顯示分頁（*）
      sortable: false,//是否啟用排序
      sortOrder: "asc",//排序方式
      queryParams: function (params) {//自定義參數(shù)，這里的參數(shù)是傳給后臺(tái)的，我這是是分頁用的
        return {//這里的params是table提供的
           startIndex: params.offset,//從數(shù)據(jù)庫第幾條記錄開始
           pageSize: params.limit//每頁記錄數(shù)
          };
      },//傳遞參數(shù)（*）
      sidePagination: "server",//分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
      pageNumber: 1,//初始化加載第一頁，默認(rèn)第一頁
      pageSize: 1,//每頁的記錄行數(shù)（*）
      pageList: [2, 4, 6, 8],//可供選擇的每頁的行數(shù)（*）
      // search: true,//是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端
      contentType: "application/x-www-form-urlencoded",
      strictSearch: true,
      //showColumns: true,//是否顯示內(nèi)容列下拉框
      //showRefresh: true,//是否顯示刷新按鈕
      minimumCountColumns: 2,//最少允許的列數(shù)
      clickToSelect: true,//是否啟用點(diǎn)擊選中行
      //height: 700,//行高，如果沒有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺得表格高度
      width:'50%',
      uniqueId: "hrPerCode",//每一行的唯一標(biāo)識(shí)，一般為主鍵列
      //showToggle: true,//是否顯示詳細(xì)視圖和列表視圖的切換按鈕
      cardView: false,//是否顯示詳細(xì)視圖
      detailView: false,//是否顯示父子表
      checkboxHeader :true, //隱藏表頭的checkbox
      singleSelect: false, //開啟單選
      showFooter:true, //開啟底部
      columns: [
        {
          field: 'perCode',
          title: '工號(hào)',
          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";
          },
          //計(jì)算此列的值
          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);
    //由于我們這里做統(tǒng)計(jì)只需要兩列，故可以將除第一列與最后一列的列全部隱藏，然后再設(shè)置第一列跨列
    //遍歷隱藏中間的列 下標(biāo)從1開始
    for(var i=1;i<footer_td.length-1;i++) {
      footer_td.eq(i).hide();
    }
    //設(shè)置跨列
    footer_td_1.attr('colspan', footer_td.length-1).show();
    //這里可以根據(jù)自己的表格來設(shè)置列的寬度 使對(duì)齊
    footer_td_1.attr('width', "910px").show();
  }
</script>
</html>

總結(jié)

以上所述是小編給大家介紹的Bootstrap-table使用footerFormatter做統(tǒng)計(jì)列的實(shí)例代碼 ，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手