datagrid 扩展 页脚 合计功能

效果图：合计信息展示在页脚中(showFooter:true)

code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript test</title>
    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
  <table id="totalSum"></table>
</body>
  <script type="text/javascript">
     $.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) + '"';
            }
        }
    });
    $("#totalSum").datagrid({
        width: '50%',
        data:[
          {pro:'北京电信建站一期',amount: 2000,price: 100000},
          {pro:'上海电信建站二期',amount: 1000,price: 50000}
        ],
        showFooter: true,// 页脚要求显示
        fitColumns: true,
        rownumbers: true,
        columns: [[{
            field: 'pro',
            align: 'center',
            title: '项目',
            width: 100,
        },
        {
            field: 'amount',
            sum: true,
            align: 'right',
            title: '数量',
            width: 100,
        },
        {
            field: 'price',
            sum: true,
            align: 'right',
            title: '已付金额',
            width: 100,
        }
        ]],
        onLoadSuccess: function (data) {
            $('#totalSum').datagrid('statistics'); //合计
        },
    })
  </script>
</html>

 

posted @ 2018-01-26 17:55  【云】风过无痕  阅读(184)  评论(0)  编辑  收藏  举报