easyui 表格底部加合计

最新推荐文章于 2023-07-27 17:16:28 发布

weixin_30527551

最新推荐文章于 2023-07-27 17:16:28 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fanyf/p/6739726.html

本文介绍两种在EasyUI Datagrid中实现数据求和统计的方法：一是通过自定义扩展方法，二是利用onLoadSuccess事件进行合计计算，并附带代码示例。

function setTotal() {
    var userid = $("#hd_buildUser").val();
    $("#totalSum").datagrid({
        url: 'MediaPaySearchHandler.ashx?optype=CostTotal&userid=' + userid,
        loadMsg: '数据加载中，请稍后...',
        showFooter: true,
        columns: [[{
            field: '项目',
            align: 'center',
            title: '项目',
            width: 160,
        },
            {
                field: '已付金额',
                sum: 'true',
                align: 'right',
                title: '已付金额',
                width: 100,
            },
        ]],
        onLoadSuccess: function (data) {
            $('#totalSum').datagrid('statistics'); //合计
        },
    })
}

 $.extend($.fn.datagrid.methods, {
    statistics: function(jq) {
        var opt = $(jq).datagrid('options').columns;
        var rows = $(jq).datagrid("getRows");
        var footer = new Array();
        footer['sum'] = "";
        for (var i = 0; i < opt[0].length; i++) {
            if (opt[0][i].sum) {
                footer['sum'] = footer['sum'] + sum(opt[0][i].field, 1) + ',';
            }
        }
        var footerObj = new Array();
        if (footer['sum'] != "") {
            var tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}";
            var obj = eval('(' + tmp + ')');
            if (obj[opt[0][0].field] == undefined) {
                footer['sum'] += '"' + opt[0][0].field + '":"<b>合计:</b>"';//第0列显示为合计
                obj = eval('({' + footer['sum'] + '})');
            } else {
                obj[opt[0][0].field] = "<b>合计:</b>" + obj[opt[0][0].field];
            }
            footerObj.push(obj);
        }
        if (footerObj.length > 0) {
            $(jq).datagrid('reloadFooter', footerObj);
        }
        function sum(filed) {
            var sumNum = 0;
            var str = "";
            for (var i = 0; i < rows.length; i++) {
                var num = rows[i][filed];
                sumNum += Number(num);
            }
            return '"' + filed + '":"' + sumNum.toFixed(2) + '"';
        }
    }
});

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

方法二：

在datagrid的onLoadSuccess事件增加代码处理。

jQuery easyUI datagrid 增加求和统计行


在datagrid的onLoadSuccess事件增加代码处理。

    <style type="text/css">
        .subtotal { font-weight: bold; }/*合计单元格样式*/
     </style>
     <script type="text/javascript">
         function onLoadSuccess() {
             //添加“合计”列
            $('#table').datagrid('appendRow', {
                 Saler: '<span class="subtotal">合计</span>',
                 TotalOrderCount: '<span class="subtotal">' + compute("TotalOrderCount") + '</span>',
                 TotalOrderMoney: '<span class="subtotal">' + compute("TotalOrderMoney") + '</span>',
                 TotalOrderScore: '<span class="subtotal">' + compute("TotalOrderScore") + '</span>',
                 TotalTrailCount: '<span class="subtotal">' + compute("TotalTrailCount") + '</span>',
                 Rate: '<span class="subtotal">' + ((compute("TotalOrderScore") / compute("TotalTrailCount")) * 100).toFixed(2) + '</span>'
             });
         }
        //指定列求和
        function compute(colName) {
             var rows = $('#table').datagrid('getRows');
             var total = 0;
             for (var i = 0; i < rows.length; i++) {
                 total += parseFloat(rows[i][colName]);
             }
             return total;
         }
     </script>

转载于:https://www.cnblogs.com/fanyf/p/6739726.html