场景描述
有一个列表,编辑某一列的信息时首先会弹出一个子页面,如图:
在这个子页面上可以修改单个信息,修改区域的时候由于需要下拉框,因此又会弹出一个子页面,如图:
当重新选择区域提交后会关闭第二个子页面,但是此时第一个弹出的子页面的区域并没有改变(数据库的值实际已经修改),原因是第一个子页面的值是从列表传过来的,因此需要第二个子页面修改区域后同步修改第一个子页面的值,实现代码如下。
代码实现
首先在第二个子页面定义一个方法
// 这是第二个子页面的方法
function sendToParent(data) {
parent.getDataFromSon(data); //这是第一个子页面函数,代码在后面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
当第二个子页面调用完修改方法并且成功后,调用sendToParent方法,把值传个第一个子页面
//监听提交 这是第二个子页面的方法
form.on('submit(add)', function (reqData) {
CoreUtil.sendAjax('自己的请求路径', {'这里是传的参数'}, function (data) {
// 这是需要传到第一个子页面的值
subData.districtId = reqData.field.districtId
subData.district = $("#district option:selected").text()
subData.streetId = reqData.field.streetId
subData.street = $("#street option:selected").text()
if (data.code == 0) {
// 修改成功后把subData的值传给第一个子页面
sendToParent(subData)
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //关闭当前弹框
} else {
layer.msg(data.msg)
}
}, 'post', false)
return false;
});
});
最后在第一个子页面获取第二个子页面传过来的值,代码如下:
// 获取第二个子页面传来的值并修改
function getDataFromSon(v) {
// 这里的req_data是从列表传过来的值
req_data.districtId = v.districtId
req_data.district = v.district
req_data.streetId = v.streetId
req_data.street = v.street
// 最后需要调用location.reload()才能更新内容
location.reload()
}