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

来源：互联网发布：一号店在线客服软件编辑：程序博客网时间：2024/06/05 19:25

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

<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>

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

0 0