Bootstrap-table使用footerFormatter做统计列

转载自：https://www.cnblogs.com/eleven258/p/9570876.html

先上图：一个简单的例子

下面直接贴出主要代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</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>

 

posted @ 2019-09-05 13:47  天涯_浪子  阅读(1544)  评论(0)    收藏  举报