layer弹出层子父页面传值 以及函数调用(其中包括从子页面重载父页面table)
这段时间使用layer开发项目,期间碰到了弹出层子父页面传值以调用函数的问题,解决之后在这里记录一下。
- 第一种情况:直接layer.open()方式,这中是直接弹出在父页面,如下代码
function registBtn(){
layui.use([ 'layer','form' ], function() {
var layer = layui.layer;
var form=layui.form;
layer.open({
type : 2,
title : '工作日志-登记',
shade: 0.5,
area : [ '85%', '90%' ],
isOutAnim: false,
anim: 5,
btn : [ '保存', '关闭' ],
content : 'project/workplat/worklog/jsp/registerLog.jsp',
/*content : './registerLog.jsp',*/
success : function(layero, index) {
},
yes : function(index, layero) {
var body =layer.getChildFrame('body', index);
body.find('#kk').click();
},
})
})
}
1.这种方式父页面调用子页面函数;首先获取到弹出层对象
然后直接调用函数即可(调用的时候可以携带参数,这个在点击数据弹出修改之类
的功上能够使用到 父页面点击 打开页面之后将table数据传到子页面函数中实现表单赋值)
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.test(data);
2.父页面获取子页面元素:首先获取到弹出层页面 然后使用find()
去找相应元素val()即可
var body =layer.getChildFrame('body', index);
body.find('#kk').click();
3.子页面获取父页面函数:如下 在子页面中,
parent.需要调用的父页面函数
2.第二种情况:parent.layer.open()弹出在当前页面的父页面,如下代码
function editLog(data){
layui.use([ 'layer','form' ], function() {
var layer = layui.layer;
var form=layui.form;
parent.layer.open({
type : 2,
title : '工作日志-修改',
shade: 0.5,
area : [ '85%', '90%' ],
isOutAnim: false,
anim: 5,
btn : [ '保存', '关闭' ],
content : 'project/workplat/worklog/jsp/registerLog.jsp',
/*content : './registerLog.jsp',*/
success : function(layero, index) {
var iframeWin = parent.window[layero.find('iframe')[0]['name']];
iframeWin.test(data);
},
yes : function(index, layero) {
var body =parent.layer.getChildFrame('body', index);
body.find('#kk').click();
},
})
})
}
1.这种情况下获取弹出层对象 需要使用parent关键字如下:
var iframeWin = parent.window[layero.find('iframe')[0]['name']];
iframeWin.test(data);
获取到弹出层对象之后 父页面可直接调用弹出层函数
2.父页面获取子页面元素:首先获取到弹出层页面 然后使用find()
去找相应元素val()即可
var body =parent.layer.getChildFrame('body', index);
body.find('#kk').click();
3.弹出层获取父页面数据:这里不能直接使用parent.xxx()函数,因为弹出层是
直接打开在当前页面的父页面(所以我们必须先找到当前页面父页面A,然后在找A页面的子页面(根据ifream id ) 也就是当前页面)代码如下
parent.document.getElementById('ifream页面id').contentWindow.需要调用的函数(如test())
这就是layer弹出层子父页面相互关系的具体实现 分两种情况,一种是layer.open 直接打开在当前页面 一种是parent.layer.open()打开在当前页面的父页面,如果对大家有帮助帮忙点赞谢谢!下一篇讲解layer如何在子页面重载父页面table