效果图：合计信息展示在页脚中(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({
width: '50%',
data:[
{pro:'北京电信建站一期',amount: 2000,price: 100000},
{pro:'上海电信建站二期',amount: 1000,price: 50000}
],
showFooter: true,// 页脚要求显示
fitColumns: true,
rownumbers: true,
columns: [[{
field: 'pro',
align: 'center',
title: '项目',
width: 100,
},
{
field: 'amount',
sum: true,
align: 'right',
title: '数量',
width: 100,
},
{
field: 'price',
sum: true,
align: 'right',
title: '已付金额',
width: 100,
}
]],
onLoadSuccess: function (data) {
$('#totalSum').datagrid('statistics'); //合计
},
})
</script>
</html>