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}
]);
easyui 增加统计行
最新推荐文章于 2022-05-08 15:11:39 发布