EasyUI DataGrid 增加求和行(求本页数据的和及所有页数据的和)

分两种情况:
一种是当前页的列求和
一种是所有页的列求和
效果大概如下:
在这里插入图片描述
先说第一种:当前页的列求和
代码如下:(本段代码复制于博客: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"}
]}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值