easyui 增加统计行

easyui  添加一行对查询出来的数据进行相应的统计计算，并放置在对应的列下面展示出来。

function initTable(){
    //数据加载
    $("#dg").datagrid({
        title:"数据列表",
        method:"POST",
        data:[],
        queryParams:{},//查询参数
        loadMsg:"数据加载中",
        onLoadSuccess: onLoadSuccess,//加载完毕后执行计算
        pagination:false,
        rownumbers:true,
        singleSelect:false,
        remoteSort:false,
        columns:[[
                  {field:"dt",title:"时间",sortable:true, width:90,align:"left"},
                  {field:"spCode",title:"sp编号",sortable:true, width:60,align:"left"},
                  {field:"spName",title:"sp名称",sortable:true, width:70,align:"left"},
                  {field:"mscCode",title:"通道编号",sortable:true, width:60,align:"left"},
                  {field:"mscName",title:"通道名称",sortable:true, width:200,align:"left"},
                  {field:"thirdPartyPayMasterId",title:"支付方式",sortable:true, width:70,align:"left"},
                  {field:"tradeType",title:"支付场景",sortable:true, width:70,align:"left"},
                  {field:"devCode",title:"CP编号",sortable:true, width:70,align:"left"},
                  {field:"devName",title:"CP名称",sortable:true, width:100,align:"left"},
                  {field:"appCode",title:"app编号",sortable:true, width:70,align:"left"},
                  {field:"appName",title:"app名称",sortable:true, width:200,align:"center"},
                  {field:"req",title:"请求总数",sortable:true, width:70,align:"right"},
                  {field:"req_su",title:"请求成功数",sortable:true, width:70,align:"right"},
                  {field:"pay",title:"支付总数",sortable:true, width:70,align:"right"},
                  {field:"pay_su",title:"支付成功数",sortable:true, width:70,align:"right"},
                  {field:"pay_su_amount",title:"支付成功总额",sortable:true, width:90,align:"center"},
                  {field:"req_su_rate",title:"请求成功率(%)",sortable:true, width:100,align:"left"},
                  {field:"pay_su_rate",title:"支付成功率(%)",sortable:true, width:100,align:"left"},
                  {field:"change_rate",title:"总体转化率(%)",sortable:true, width:100,align:"left"},
        ]]
    });

 }

 function onLoadSuccess() {
     //添加“合计”列
     $('#dg').datagrid('appendRow', {
         dt : '<span>====</span>',
         spCode : '<span>====</span>',
         spName : '<span>====</span>',
         mscCode : '<span>====</span>',
         mscName : '<span></span>',
         thirdPartyPayMasterId : '<span>====</span>',
         tradeType : '<span>====</span>',
         devCode : '<span>====</span>',
         devName : '<span>====</span>',
         appCode : '<span>====</span>',
         appName : '<span>合计:</span>',
         req: '<span>' + compute("req") + '</span>',
         req_su: '<span>' + compute("req_su") + '</span>',
         pay: '<span>' + compute("pay") + '</span>',
         pay_su: '<span>' + compute("pay_su") + '</span>',
         pay_su_amount: '<span>' + compute("pay_su_amount") + '</span>',
     });
 }
 //指定列求和
 function compute(colName) {
     var rows = $('#dg').datagrid('getRows');
     var total = 0;
     for (var i = 0; i < rows.length; i++) {
         total += parseFloat(rows[i][colName]);
     }
     return total;
 }


方法二：

// 更新页脚行的值并刷新
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// 更新页脚行并载入新数据
$('#dg').datagrid('reloadFooter',[
    {name: 'name1', salary: 60000},
    {name: 'name2', salary: 65000}
]);