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

// 为datagrid开启统计功能

02	$("#list").datagrid({

03	..... // 此处代码略

04	showFooter : true,

05	onLoadSuccess : function() {

06	$("#list").datagrid("statistics");

07

}

08

});

09	// 统计某列（参照金额列）

10	<table id="list">

11

<thead>

12

<tr>

13	<th field="no" width="100">序号</th>

14	<th field="data" width="100">日期</th>

15	<th field="money" width="100"

16	formatter="formatMoney" align="right"

17	sum="true" avg="true" min="true" max="true" >金额(元)</th>

18	<th field="status" width="60" sortable="true">有效状态</th>

19

</tr>

20

</thead>

21

</table>

2. [图片] 效果演示    

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<opt[0].length; 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 + "":"<b>当页合计:</b>"";

034	obj = eval("({" + footer["sum"] + "})");

035

}else{

036	obj[opt[0][0].field] = "<b>当页合计:</b>" + 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 + "":"<b>当页均值:</b>"";

046	obj = eval("({" + footer["avg"] + "})");

047

}else{

048	obj[opt[0][0].field] = "<b>当页均值:</b>" + 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 + "":"<b>当页最大值:</b>"";

059	obj = eval("({" + footer["max"] + "})");

060

}else{

061	obj[opt[0][0].field] = "<b>当页最大值:</b>" + 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 + "":"<b>当页最小值:</b>"";

072	obj = eval("({" + footer["min"] + "})");

073

}else{

074	obj[opt[0][0].field] = "<b>当页最小值:</b>" + 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<rows.length;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<rows.length;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<rows.length;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<rows.length;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