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)) }
相关文章推荐
- 详解vue 配合vue-resource调用接口获取数据
- ajax获取数据自动创建分页,支持自定义显示数据量以及分页数量
- *jqGrid的使用说明书( 基本使用 数据获取 分页 添加链接 )
- 在小程序后端中转获取接口数据,绕过前端调用限制
- Android 通过调用接口获取数据
- 前端调用后台接口拿数据,实现数据更新
- Moss2007 jQuery调用Webservice获取列表数据 更新数据
- 调用com+时,提示 0x800706f7,error msg:占位程序接收到错误数据,(本地调用时提示:不支持此接口)
- HTML5网页通过ajax跨域调用接口获取json数据并解析(一)
- 在线访谈:解决jQuery异步获取数据,客户端始终不更新的问题
- C# 利用xmlhttp根据网址调用接口获取数据
- .NET通过调用接口来获取数据的方法
- 调用REST接口获取数据
- 解决jQuery异步获取数据,前端始终不更新的问题
- 关于jqgrid获取分页全部数据
- zabbix 二次开发之调用api接口获取历史数据
- C# 利用xmlhttp根据网址调用接口获取数据
- 使用httpClient调用接口获取响应数据
- zabbix 二次开发之调用api接口获取历史数据
- asp通过json调用webservice接口,并获取返回的xml数据及解析