EasyUI datagrid增加统计当前页中某列的最大值，最小值，平均值，总和

 

一、扩展方法

/*
quber：
    EasyUI datagrid增加统计当前页中某列的最大值，最小值，平均值，总和
    使用方法：
    onLoadSuccess : function() {
        $('#dg').datagrid('statistics');
    }

    列属性中加入：sum: true, sumCol: 'Capacity', avg: true, avgCol: 'Capacity', max: true, maxCol: 'Capacity', min: true, minCol: 'Capacity'
    sumCol："合计"标题显示的列名称
    ……
 */
$.extend($.fn.datagrid.methods, {
    statistics: function (jq) {
        var opt = $(jq).datagrid('options').columns;
        var rows = $(jq).datagrid("getRows");

        var footer = new Array();
        footer['sum'] = "";
        footer['avg'] = "";
        footer['max'] = "";
        footer['min'] = "";

        var sumCol = '',
            avgCol = '',
            maxCol = '',
            minCol = '';

        for (var i = 0; i < opt[0].length; i++) {
            if (opt[0][i].sumCol) sumCol = opt[0][i].sumCol;
            if (opt[0][i].avgCol) avgCol = opt[0][i].avgCol;
            if (opt[0][i].maxCol) maxCol = opt[0][i].maxCol;
            if (opt[0][i].minCol) minCol = opt[0][i].minCol;

            if (opt[0][i].sum) {
                footer['sum'] = footer['sum'] + sum(opt[0][i].field) + ',';
            }
            if (opt[0][i].avg) {
                footer['avg'] = footer['avg'] + avg(opt[0][i].field) + ',';
            }
            if (opt[0][i].max) {
                footer['max'] = footer['max'] + max(opt[0][i].field) + ',';
            }
            if (opt[0][i].min) {
                footer['min'] = footer['min'] + min(opt[0][i].field) + ',';
            }
        }

        var footerObj = new Array();
        var tmp, obj;
        if (footer['sum'] != "") {
            tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}";
            obj = eval('(' + tmp + ')');
            if (sumCol.length > 0) obj[sumCol] = '合计';
            footerObj.push(obj);
        }

        if (footer['avg'] != "") {
            tmp = '{' + footer['avg'].substring(0, footer['avg'].length - 1) + "}";
            obj = eval('(' + tmp + ')');
            if (avgCol.length > 0) obj[avgCol] = '平均值';
            footerObj.push(obj);
        }

        if (footer['max'] != "") {
            tmp = '{' + footer['max'].substring(0, footer['max'].length - 1) + "}";
            obj = eval('(' + tmp + ')');
            if (maxCol.length > 0) obj[maxCol] = '最大值';
            footerObj.push(obj);
        }

        if (footer['min'] != "") {
            tmp = '{' + footer['min'].substring(0, footer['min'].length - 1) + "}";
            obj = eval('(' + tmp + ')');
            if (minCol.length > 0) obj[minCol] = '最小值';
            footerObj.push(obj);
        }

        if (footerObj.length > 0) {
            $(jq).datagrid('reloadFooter', footerObj);
        }

        function sum(filed) {
            var sumNum = 0;
            for (var i = 0; i < rows.length; i++) {
                sumNum += Number(rows[i][filed]);
            }
            return '"' + filed + '":"' + sumNum.toFixed(2) + '"';
        };

        function avg(filed) {
            var sumNum = 0;
            for (var i = 0; i < rows.length; i++) {
                sumNum += Number(rows[i][filed]);
            }
            return '"' + filed + '":"' + (sumNum / rows.length).toFixed(2) + '"';
        }

        function max(filed) {
            var max = 0;
            for (var i = 0; i < rows.length; i++) {
                if (i == 0) {
                    max = Number(rows[i][filed]);
                } else {
                    max = Math.max(max, Number(rows[i][filed]));
                }
            }
            return '"' + filed + '":"' + max + '"';
        }

        function min(filed) {
            var min = 0;
            for (var i = 0; i < rows.length; i++) {
                if (i == 0) {
                    min = Number(rows[i][filed]);
                } else {
                    min = Math.min(min, Number(rows[i][filed]));
                }
            }
            return '"' + filed + '":"' + min + '"';
        }
    }
});

二、修改源码

找到源码datagrid的列属性，可搜索 var col = $.extend({}, $.parser.parseOptions(this 关键字定位，然后添加 "sum","sumCol", "avg","avgCol", "max","maxCol", "min","minCol" 这几个属性，如下图所示：

 

三、使用方法

 

在加载成功方法中调用：

onLoadSuccess: function () {
    $('#dg').datagrid('statistics');
},

设置列统计属性：

field: 'Price', title: '价格', width: 200, sum: true, sumCol: 'Capacity', avg: true, avgCol: 'Capacity', max: true, maxCol: 'Capacity', min: true, minCol: 'Capacity'

最终效果如下图所示：