效果图：合计信息展示在页脚中(showFooter:true)
code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript test</title> <link rel="stylesheet" type="text/css" href="css/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> </head> <body> <table id="totalSum"></table> </body> <script type="text/javascript"> $.extend($.fn.datagrid.methods, { statistics: function(jq) { var opt = $(jq).datagrid('options').columns; var rows = $(jq).datagrid("getRows"); var footer = new Array(); footer['sum'] = ""; for (var i = 0; i < opt[0].length; i++) { if (opt[0][i].sum) { footer['sum'] = footer['sum'] + sum(opt[0][i].field, 1) + ','; } } 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 + '":"<b>合计:</b>"';//第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) { $(jq).datagrid('reloadFooter', footerObj); } function sum(filed) { var sumNum = 0; var str = ""; for (var i = 0; i < rows.length; i++) { var num = rows[i][filed]; sumNum += Number(num); } return '"' + filed + '":"' + sumNum.toFixed(2) + '"'; } } }); $("#totalSum").datagrid({ '50%', data:[ {pro:'北京电信建站一期',amount: 2000,price: 100000}, {pro:'上海电信建站二期',amount: 1000,price: 50000} ], showFooter: true,// 页脚要求显示 fitColumns: true, rownumbers: true, columns: [[{ field: 'pro', align: 'center', title: '项目', 100, }, { field: 'amount', sum: true, align: 'right', title: '数量', 100, }, { field: 'price', sum: true, align: 'right', title: '已付金额', 100, } ]], onLoadSuccess: function (data) { $('#totalSum').datagrid('statistics'); //合计 }, }) </script> </html>