杭州高端网站设计东莞樟木头网站设计
举例导入功能,
1.父页面打开子页面将excel导入后台解析,
2.后台解析将数据从子页面返回给父页面.
3.父页面加载子页面的解析的数据.
直接上代码
父页面
父页面设置一个函数 ,然后用来接受参数.dat 就是接受的参数 后面的都是业务代码(不用看,记住函数名就行
getDataFromSon)
// 获取第二个子页面传来的值并修改function getDataFromSon(dat) {console.log("父页面收到的数据")console.log(dat)// 最后需要调用location.reload()才能更新内容// 选中表格中除第一行外的所有 tr 元素并删除$('#mTable tr:gt(0)').remove();//遍历添加for (let i = 0; i < dat.length; i++) {let da = dat[i];console.log("添加内容")console.log(da)var trHtml="<tr>\n" +" <td><input style=\"width: 100%;\" name=\"name\" value='" + da.goodname + "' required ></td>\n" +" <td><input style=\"width: 100%;\" name=\"num\" value='" + da.num + "' required ></td>\n" +" <td><input style=\"width: 100%;\" name=\"guige\" value='" + da.guige + "' required ></td>\n" +" <td><input style=\"width: 100%;\" name=\"beizhu\" value='" + da.beizhu + "' required ></td>\n" +" </tr>";$("#mTable").append(trHtml);}// location.reload()}
父页面的打开弹窗代码,就是打开子页面(上传文件的页面)
function importExcels(){$.modal.open('导入数据',ctx + "business/buy" + "/uploadjiexi", '770', '560');}
子页面
这是导入excel表格之后的一个提交校验函数.重点看回调函数,function(response,layero) ,就是提交之后将后台数据传输给父页面.根据你的需要可改成 关闭子页面时/监听是否勾选函数等等,触发传输数据到父页面 ,自己根据业务场景修改即可
function submitHandler() {if ($.validate.form()) {$.operate.save( "/business/buy/uploadjiexi", $('#form-outhis-add').serialize(),function(response,layero) {console.log("开始回调")console.log(response.data)datass=response.data;console.log(response)if (response.code === 0) { // 假设成功状态码为200//判断是否存在window对象if( parent.window){console.log("存在")console.log(parent.window)console.log(parent.layer)}else {console.log("不存在")}//遍历寻找窗口var paretindex;var ws=window.parent;for (let i = 0; i < ws.length; i++) {let windowObj = ws[i];if(windowObj.location.pathname == '/business/buy/add'){paretindex=i;}}//判断索引是否找到if (paretindex.length == 0){$.modal.alertError("解析失败!!请刷新页面重新解析!");return;}console.log('/business/buy/add索引为:'+paretindex);//根据索引执行父页面方法window.parent[paretindex].getDataFromSon(datass);// window.parent.getDataFromSon(data); //这是第一个子页面函数，代码在后面//关闭子页面/*var index = parent.layer.getFrameIndex(window.name);console.log(index)parent.layer.close(index);*/} else {console.log("不等于200")$.modal.alertError("上传失败：" + response.msg);}});}}
重点分析回调函数
//定义变量存储后台结果
var datass;function(response,layero) {//1.console.log("开始回调")//获取后台返回的结果console.log(response.data)//赋值给变量datass=response.data;//2.if (response.code === 0) { // 假设成功状态码为0//判断是否存在parent.window对象if( parent.window){console.log("存在")//输出看下 父窗口是数组(存在嵌套)还是单个console.log(parent.window)}else {console.log("不存在")}//3. //遍历寻找窗口 我的是嵌套所以遍历找下我的add页面也就是我的父窗口var paretindex;var ws=window.parent;for (let i = 0; i < ws.length; i++) {let windowObj = ws[i];//根据属性查找我的父窗口 并记录父窗口的索引,不会找就看前端console面板找属性,window.location.pathnameif(windowObj.location.pathname == '/business/buy/add'){paretindex=i;}} //判断索引是否找到if (paretindex.length == 0){$.modal.alertError("解析失败!!请刷新页面重新解析!");return;}//4.**********找到父索引 然后执行父页面的方法 重点**********************************console.log('/business/buy/add索引为:'+paretindex);//根据索引执行父页面方法,getDataFromSon 父页面的获取参数方法window.parent[paretindex].getDataFromSon(datass);} else {console.log("不等于200")$.modal.alertError("上传失败：" + response.msg);}}
讲解很清楚,适合小白照着抄和改.