统计easyui datagrid某列之和显示在对应列下面-成都鑫佳鑫科技有限公司专注医院协同办公管理平台,母婴安康访视平台,医院满意度调查系统,病历档案电子扫描管理系统,医院物资管理系统,四川本土自主研发的医院信息化管理专家-咨询电话：02887611908

统计easyui datagrid某列之和显示在对应列下面

2014-11-04

本示例将计算easyui datagrid某些列的数据求和，然后将求和的数据显示在所在easyui列的最下面，实现统计功能，效果如下图

统计easyui datagrid某列之和显示在对应列下面

　　源代码如下

－收缩HTML代码　　运行代码[如果运行无效果，请自行将源代码保存为html文件运行]

<tableid="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 += rows[i]['listprice'];
utotal += rows[i]['unitcost'];
}
//新增一行显示统计信息
$('#dg').datagrid('appendRow', { itemid: '统计：', listprice: ptotal, unitcost: utotal });
}
<script>

product.json

－收缩HTML代码　　运行代码[如果运行无效果，请自行将源代码保存为html文件运行]

{"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"}
]}