新聞動態   News
聯係cblv8app菠萝官网下载   Contact
你的位置:首頁 > 新聞動態

統計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"}
]}