效果如圖:

代碼如下:
<table id="dg"></table>
<script> $(function () { $('#dg').datagrid({ singleSelect: true, onLoadSuccess: compute,//加載完畢后執行計算 url: 'product.json', fitColumns: true, pagination: true, pageSize: 3, title: '統計easyui datagrid某列之和顯示在對應列下面', width: 400, height: 300, columns: [[{ field: 'itemid', width: 80, title: 'Item ID' }, { field: 'productname', width: 100, editor: 'text', title: 'Product Name' }, { field: 'listprice', width: 80, align: 'right', title: 'List Pirce' }, { field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost' }]] }); }); function compute() {//計算函數 var rows = $('#dg').datagrid('getRows')//獲取當前的數據行 var ptotal = 0//計算listprice的總和 , utotal = 0;//統計unitcost的總和 for (var i = 0; i < rows.length; i++) { ptotal += parseFloat(rows[i]['listprice']); utotal += parseFloat(rows[i]['unitcost']);
}
//新增一行顯示統計信息 $('#dg').datagrid('appendRow', { itemid: '<b>統計:</b>', listprice: ptotal.toFixed(1), unitcost: utotal }); } </script>
附:
{"total":28,"rows":[
{"productname":"Koi","unitcost":10.00,"listprice":36.50,"itemid":"EST-1"},
{"productname":"Dalmation","unitcost":12.00,"listprice":18.50,"itemid":"EST-10"},
{"productname":"Rattlesnake","unitcost":12.00,"listprice":38.50,"itemid":"EST-11"},
{"productname":"Rattlesnake","unitcost":12.00,"listprice":26.50,"itemid":"EST-12"},
{"productname":"Iguana","unitcost":12.00,"listprice":35.50,"itemid":"EST-13"}
]}
