EasyUI DataGrid 添加合計行

        后端返回合計行有時候並不簡單，EasyUi DataGrid的Footer可以很方便的在前端添加合計行，並且能實現復雜的合計，例如columnA的合計是columnA的值相加，columnB的合計是columnB的平均值，columnC的合計是columnA的合計除以columnB的合計。

        要使Footer生效，必須設置DataGrid的屬性showFooter:true,然后擴展我們的合計方法，直接貼代碼：

 

$.extend($.fn.datagrid.methods, {
statistics: function(jq) {
        //所有的列
        var opt = $(jq).datagrid('options').columns;
    	//所有的行
        var rows = $(jq).datagrid("getRows");
    	//debugger;
        var footer = new Array();
        footer['sum'] = "";
        for (var i = 0; i < opt[0].length; i++) {
        	var s = opt[0][i].heji;
                console.info(s);
             //給需要合計計算的列定義合計屬性，並且設置其計算規則，以下代碼直接用eval函數執行計算規則，算出結果，暫時封了以下sum、avg、min、max四個函數，特殊需求自己加。
             //例如columnA的合計是columnA的值相加(定義為：{field: 'columnA', title: 'A', width: 120,heji: 'sum("columnA")'},其heji屬性就是你要計算合計的方法實現)，
            //columnB的合計是columnB的平均值(定義為：{field: 'columnB', title: 'B', width: 120,heji: 'avg("columnB")'},其heji屬性就是你要計算合計的方法實現)，
             //columnC的合計是columnA的合計除以columnB的合計(定義為：{field: 'columnC', title: 'C', width: 120,heji: '(sum("columnA")/avg("columnB"))'},其heji屬性就是你要計算合計的方法實現)
            if (opt[0][i].heji) {
                footer['sum'] = footer['sum'] +'"' + opt[0][i].field + '":"' + eval(opt[0][i].heji) +'"' + ',';
            }
        }
        var footerObj = new Array();
        if (footer['sum'] != "") {
            var tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}";
            var obj = eval('(' + tmp + ')');
            if (obj[opt[0][0].field] == undefined) {
                footer['sum'] += '"' + opt[0][0].field + '":"合計:"';//第0列顯示為合計
                obj = eval('({' + footer['sum'] + '})');
            } else {
                obj[opt[0][0].field] = "<b>合計:</b>" + obj[opt[0][0].field];
            }
            footerObj.push(obj);
        }
        if (footerObj.length > 0) {
        	console.info(footerObj);
            $(jq).datagrid('reloadFooter', footerObj);
        }
        function sum(filed){
            var sumNum = 0;
            for(var i=0;i<rows.length;i++){
                if(isNaN(Number(rows[i][filed])))
                    continue;
                sumNum += Number(rows[i][filed]);
            }
            return sumNum.toFixed(2);
        }

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

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

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

　　

　　最后當DataGrid加載后，執行擴展方法：

onLoadSuccess: function (data) {
                    	//console.info(data);
                        $('#datagrid').datagrid('statistics'); //合計
                    } 

　　OK。