BootStrap的一列数据值合计功能

BootStrap列数据合计

开始之前给大家讲个今天发生在我身边的真实趣事，调节一下压抑的学习氛围：
某开发哥跟产品小姐姐讨论需求，需求不明确，开发哥对产品说：你原型这样这样是不是画我不就不问了？产品小姐姐非常幽默的说：不!我想让你问！只见开发哥说：这你不找死呢？ 。。。。。。。。不好笑就看下面的吧，反正我是笑了。。。。。。。。。

先看一下效果，上面的效果图，上图中将本金账户列的数据合计放在当前列中合计的行中

实现流程：

1. 设置属性：
   showFooter: true,//设置显示合计的一行属性
2. 在需要设置“合计”二字的列上写

footerFormatter: function (value) {
                            return "合计";
                        }

3.在需要合计的列上写下：

 footerFormatter: function (value) {
                            var count = 0;
                            for (var i in value) {
                                if (i == "contains") {//如果没有值就返回contains
                                    continue;
                                }
                                count += value[i].thisGYLPlan;
                            }
                            return formatMoney(count);//formatMoney是我的工具类方法，设置千分位展示的
                        }

//页面完整js
function load(type) {
    $('#exampleTable').bootstrapTable('destroy');
    $('#exampleTable')
        .bootstrapTable(
            {
                method: 'get', // 服务器数据的请求方式 get or post
                url: prefix + "/planList", // 服务器数据的加载地址
                //	showRefresh : true,
                //	showToggle : true,
                //	showColumns : true,
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect: false, // 设置为true将禁止多选
                clickToSelect: true, // 单击行即可以选中
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize: 50, // 如果设置了分页，每页数据条数
                pageList: [10, 20, 50],
                pageNumber: 1, // 如果设置了分布，首页页码
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                height: 427.4,//固定表头，设置固定高度
                //search : true, // 是否显示搜索框
                showFooter: true,//设置显示脚属性
                sortName: 'uid',
                sortOrder: 'asc',
                sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                queryParams: function (params) {
                    return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        pageSize: params.pageSize,
                        pageNumber: params.pageNumber,
                        type:type
                        // name:$('#searchName').val(),
                        // username:$('#searchName').val()
                    };
                },
                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                queryParamsType: '',//返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        class: 'uid',
                        title: '序号',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {
                        field: 'projectTimeLimitType',
                        title: '公司名称',
                      
                        footerFormatter: function (value) {
                            return "合计";
                        }
                    },
                    {
                        field: 'thisDCPlan',
                        title: '本金账户',
                        footerFormatter: function (value) {
                            var count = 0;
                            for (var i in value) {
                                if (i == "contains") {
                                    continue;
                                }
                                count += value[i].thisDCPlan;
                            }
                            return  formatMoney(count);
                        }
                    },
                    {
                        field: 'thisGYLPlan',
                        title: '利息账户',
                        footerFormatter: function (value) {
                            var count = 0;
                            for (var i in value) {
                                if (i == "contains") {
                                    continue;
                                }
                                count += value[i].thisGYLPlan;
                            }
                            return formatMoney(count);
                        }
                    },
                    {
                        field: 'thisGDPlan',
                        title: '服务费账户',
                        footerFormatter: function (value) {
                            var count = 0;
                            for (var i in value) {
                                if (i == "contains") {
                                    continue;
                                }
                                count += value[i].thisGDPlan;
                            }
                            return formatMoney(count);
                        }
                    }               
                   ]
            });
    //个性化配置列表的表头，在关闭时将保存到数据库(先删后插),方法在common.js中
    var module = 'assetShortPlan';
    pageHiddenList(module);
    //启动页面查看到的数据，方法在common.js中
    pageShowList(module);
}