分兩種情況:
一種是當前頁的列求和
一種是所有頁的列求和
效果大概如下:
先說第一種:當前頁的列求和
代碼如下:(本段代碼複製於博客:EasyUI datagrid表數據某列總和)
<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>
附:
表單數據json集
{"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"}
]}
第二種:所有頁的列求和
代碼如下:
<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() {//計算函數
//重新請求數據(datagrid數據不是分頁傳過來而是全部數據一起傳過來)
$.ajax({
url: "xxx.cs",
//page頁數1,rows是datagrid的總行數,其他參數和需要獲取行對象的datagrid是一樣的
data: {
page: "1", rows: $('#table1').datagrid('getData').total
},
type: "get",
async: false,
dataType: "json",
success: function (datas) {
rows = datas.rows; //獲取datagird的所有行
}
});
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>
附:
表單數據json集
{"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"}
]}