EasyUi的DataGrid组件扩展,显示统计当前页信息

// 为datagrid开启统计功能
02 $('#list').datagrid({
03     ..... // 此处代码略
04     showFooter : true,
05     onLoadSuccess : function() {
06         $('#list').datagrid('statistics');
07     }
08 });
09 // 统计某列(参照金额列)
10 "list">
11     
12     
13         "no" width="100">序号
14         "data" width="100">日期
15         "money" width="100"
16                 formatter="formatMoney" align="right"
17                 sum="true" avg="true" min="true" max="true" >金额(元)
18         "status" width="60" sortable="true">有效状态
19     
20     
21

2. [图片] 效果演示    

EasyUi的DataGrid组件扩展,显示统计当前页信息_第1张图片

3. [文件] easyui.plugin.js ~ 3KB     下载(160)    

001 $.extend($.fn.datagrid.methods, {
002     statistics: function (jq) {
003         var opt=$(jq).datagrid('options').columns;
004         var rows = $(jq).datagrid("getRows");
005          
006         var footer = new Array();
007         footer['sum'] = "";
008         footer['avg'] = "";
009         footer['max'] = "";
010         footer['min'] = "";
011          
012         for(var i=0; i
013             if(opt[0][i].sum){
014                 footer['sum'] = footer['sum'] + sum(opt[0][i].field)+ ',';
015             }
016             if(opt[0][i].avg){
017                 footer['avg'] = footer['avg'] + avg(opt[0][i].field)+ ',';
018             }
019             if(opt[0][i].max){
020                 footer['max'] = footer['max'] + max(opt[0][i].field)+ ',';
021             }
022             if(opt[0][i].min){
023                 footer['min'] = footer['min'] + min(opt[0][i].field)+ ',';
024             }
025         }
026  
027         var footerObj = new Array();
028          
029         if(footer['sum'] != ""){
030             var tmp = '{' + footer['sum'].substring(0,footer['sum'].length - 1) + "}";
031             var obj = eval('(' + tmp + ')');
032             if(obj[opt[0][0].field] == undefined){
033                 footer['sum'] += '"' + opt[0][0].field + '":"当页合计:"';
034                 obj = eval('({' + footer['sum'] + '})');
035             }else{
036                 obj[opt[0][0].field] = "当页合计:" + obj[opt[0][0].field];
037             }
038             footerObj.push(obj);
039         }
040          
041         if(footer['avg'] != ""){
042             var tmp = '{' + footer['avg'].substring(0,footer['avg'].length - 1) + "}";
043             var obj = eval('(' + tmp + ')');
044             if(obj[opt[0][0].field] == undefined){
045                 footer['avg'] += '"' + opt[0][0].field + '":"当页均值:"';
046                 obj = eval('({' + footer['avg'] + '})');
047             }else{
048                 obj[opt[0][0].field] = "当页均值:" + obj[opt[0][0].field];
049             }
050             footerObj.push(obj);
051         }
052          
053         if(footer['max'] != ""){
054             var tmp = '{' + footer['max'].substring(0,footer['max'].length - 1) + "}";
055             var obj = eval('(' + tmp + ')');
056              
057             if(obj[opt[0][0].field] == undefined){
058                 footer['max'] += '"' + opt[0][0].field + '":"当页最大值:"';
059                 obj = eval('({' + footer['max'] + '})');
060             }else{
061                 obj[opt[0][0].field] = "当页最大值:" + obj[opt[0][0].field];
062             }
063             footerObj.push(obj);
064         }
065          
066         if(footer['min'] != ""){
067             var tmp = '{' + footer['min'].substring(0,footer['min'].length - 1) + "}";
068             var obj = eval('(' + tmp + ')');
069              
070             if(obj[opt[0][0].field] == undefined){
071                 footer['min'] += '"' + opt[0][0].field + '":"当页最小值:"';
072                 obj = eval('({' + footer['min'] + '})');
073             }else{
074                 obj[opt[0][0].field] = "当页最小值:" + obj[opt[0][0].field];
075             }
076             footerObj.push(obj);
077         }
078          
079          
080          
081         if(footerObj.length > 0){
082             $(jq).datagrid('reloadFooter',footerObj);
083         }
084          
085          
086         function sum(filed){
087             var sumNum = 0;
088             for(var i=0;i
089                 sumNum += Number(rows[i][filed]);
090             }
091             return '"' + filed + '":"' + sumNum.toFixed(2) +'"';
092         };
093          
094         function avg(filed){
095             var sumNum = 0;
096             for(var i=0;i
097                 sumNum += Number(rows[i][filed]);
098             }
099             return '"' + filed + '":"'+ (sumNum/rows.length).toFixed(2) +'"';
100         }
101  
102         function max(filed){
103             var max = 0;
104             for(var i=0;i
105                 if(i==0){
106                     max = Number(rows[i][filed]);
107                 }else{
108                     max = Math.max(max,Number(rows[i][filed]));
109                 }
110             }
111             return '"' + filed + '":"'+ max +'"';
112         }
113          
114         function min(filed){
115             var min = 0;
116             for(var i=0;i
117                 if(i==0){
118                     min = Number(rows[i][filed]);
119                 }else{
120                     min = Math.min(min,Number(rows[i][filed]));
121                 }
122             }
123             return '"' + filed + '":"'+ min +'"';
124         }
125     }
126 });

4. [代码]补充说明    

1 使用前需要先导入 easyui.plugin.js 文件,另外需要修改easyui的datagrid组件源码,见下图

5. [图片] 1.jpg    





原文出处:http://www.oschina.net/code/snippet_659525_20039

你可能感兴趣的:(学习笔记之jquery)