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

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

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

 


原创文章,转载请注明出处:统计easyui datagrid某列之和显示在对应列下面
评论(0)Web开发网
阅读(5122)喜欢(2)不喜欢(0)easyui