easyui 表格底部加合計

      

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>