您的位置:首页 > 其它

jqgrid获取本页数据,调用接口异步更新行数据(支持分页)

2019-05-10 17:09 330 查看
  • 本功能实现jqgrid加载数据完成后,将本页的某个字段作为参数去请求(ajax方式)第三方接口,再将接口返回的数据更新到表格中的某列。
$("#lstMainGrid").migrid({
postData: {
path: 'Campaign',
type: "custnode",
key: "query",
startdate: $("#startdate").val(),
enddate: $("#enddate").val(),
},
colNames: ['callbackid', '活动编号', '活动名称', '活动开始时间', '活动结束时间', 'CRM系统客户编号', '名单分配时间',
'外呼营销拨打次数', '最后绑定坐席编号', '最后绑定坐席姓名', 'newbusinessaccount', '客户节点状态',
],
colModel: [
{ name: 'CALLBACKID',index: 'callbackid',align: 'center',width: 60, hidden: true,key:true},
{ name: 'CLID',index: 'clid',align: 'center',width: 60},
{ name: 'NAME',ndex: 'name',align: 'center',width: 80},
{ name: 'STARTTIME',index: 'starttime',align: 'center',width: 80 },
{ name: 'ENDTIME',index: 'endtime',align: 'center',width: 80},
{ name: 'CUSTOMERNUMBER',index: 'customernumber',align: 'center',width: 100 },
{ name: 'DISTDT',  index: 'distdt',align: 'center',width: 120},
{ name: 'SENDTIMES', index: 'sendtimes',align: 'center',width: 100},
{ name: 'ASSIGNEDUSR',index: 'assignedusr',align: 'center',width: 100},
{ name: 'ASSIGNEDNAME', index: 'assignedname',align: 'center',width: 100},
{ name: 'NEWBUSINESSACCOUNT',index: 'NEWBUSINESSACCOUNT',align: 'center', width: 120,hidden: true},
{ name: 'custnode', index: 'custnode',align: 'center',width: 120 },
],
pager: "#divMainGridPager",
container: "#divMainGrid",
shrinkToFit: true,
buttonselector: ".js-form .btn",
containerQuery: "#divquery",
//数据加载完毕时执行
loadComplete: () => {
const reqId = serialNo();
const timestamp = new Date().getTime();
//获取本页数据
const rowdatas = $("#lstMainGrid").jqGrid('getRowData');
let postData = [];
rowdatas.forEach(item => {
if (item.NEWBUSINESSACCOUNT)
//取的本页数据中某列的所有数据
postData.push(item.NEWBUSINESSACCOUNT);
//如数组需要去重,则调用以下方法
//unique(postData);
});
//定义请求报文格式
let params = {
'appId': 'xxx',
'reqId': reqId,
'timestamp': timestamp,
'data': {
'newBusinessAccountList': postData
}
}
if(rowdatas.length > 0)
//方法内,ajax调用接口,将返回数据更新到表格中
postCom(params, rowdatas);
}
});
//post Ajax
const postCom = (params, userData) => {
$.ajax({
url: 'http://xxxxxxx/api/',
type: 'post',
timeout: 10000,
dataType: 'JSON',
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
success: data => {
returnData = data.data;
//注意数组遍历的先后顺序
returnData.forEach(returnItem => {
userData.forEach(userItem => {
//将表格本页数据与接口返回数据的某字段进行匹配,匹配一致,则将本页字段扩展(即本页数据增加接口返回字段数据)
if (userItem.NEWBUSINESSACCOUNT == returnItem.custCode) {
userItem.custnode = returnItem.custNodeDesc;
}
});
});
const $gridDevice = $("#lstMainGrid");
userData.forEach(item => {
//根据表格中CALLBACKID字段来更新行数据,注意:CALLBACKID字段必须要有key:true属性
$gridDevice.jqGrid('setRowData', item.CALLBACKID,item);
});
},
error: res => {
console.log(res.m);
$.mitools.dialog.ShowError('接口查询客户节点信息失败!');
}
});
}
//数组去重
const unique = arr => {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: