layer 是一款功能强大的web弹出层组件,很多时候我们需要使用它弹出各种各样的信息
很多情况它都能胜任,比如简单的msg文本,tips提示,loading加载等。
但是对于功能更强大的弹出页面和iframe,在需要在父子页面之间传递数据的时候,
学习和使用起来就不是那么简单了。
本文主要记录了在使用layer组件进行父子传值时的一下方法和个人遇到的错误总结。
在此之前需要对layer有一定的了解。在此不再啰嗦!下面的例子都是夫页面利用layer打开iframe弹窗,即layer.open ({type:2})
废话不多说,先上运行成功的代码
layer.open({
type: 2
,title: '详细'
,content: 'layerWindow/detail.html' //需要打开的页面链接
,maxmin: true
,area: ['500px', '450px'],
success: function(layero, index){
var body = layer.getChildFrame('body',index);//建立父子联系【核心语句】
var iframeWin = window[layero.find('iframe')[0]['name']];//【核心句】
// iframeWin.method(); //这句话的意思是可以通过ifarmeWin调用子页面的方法
// console.log(body.html()) //得到iframe页的body内容
// body.find('input').val('Hi,我是从父页来的')
var inputList = body.find('input'); //取得子页面中input输入框
//var dataLists= [1000,11111,11,1333,1,1,1,1,1,1,1,1,1,11,,11,1,1];测试数组
for(var j = 0; j< inputList.length; j++){ //把父页面的数据放到子页面的input框中
body.find(inputList[j]).val(dataLists[j]);
}
}
});
核心的代码就是上面这些。现在来看一下效果:
这是父页面的表格(https://img-blog.csdnimg.cn/20190528181518571.png)
当我点击详细栏里面的图标时,使用layer弹出详细信息。
可以看到这时数据已经从表格里面传递到了layer弹出窗口的表单中。说明父传子传递成功。(如果没有真实数据的可以用我注释掉的模拟数据,那么这时表单中显示的可能就是那一串数字)
首先上代码:
这是父页面代码
layer.open({
type: 2
,title: '组织目录'
,content: 'LayerWindows/OrgTree.html'
,maxmin: true
,offset: 't'
,area: ['500px', '420px']
,btn: ['选择', '取消']
,yes: function(index, layero){
var body = layer.getChildFrame('body',index);//建立父子联系【核心】
var iframeWin = window[layero.find('iframe')[0]['name']];//【核心】
var v = iframeWin.get(); //调用子页面的方法
$("#section").val(v); //设置父页面元素中的值
console.log(v);
layer.close(index); //手动关闭弹出层
// submit.trigger('click');
}
});
在这里我是通过父页面调用子页面的方法实现参数传递,因此在子页面中还需要定义上面代码中调用的get()方法。
这是子页面代码:
function get(){
//nodeId = 'hahahha'; //测试数据
return nodeId ;
}
上面的代码通过get()返回了一个数据
下面是程序结果:
子页面中选中数据,点击选择,关闭弹层。在父页面中显示选择结果。
父页面中显示选择的结果。可以看到参数传递成功,如果使用测试数据,那么输入框中将显示hahaha。
关于layer传递数据的方法和博文相当的多,但是很多对于向我这样的初学者理解起来有一定的困难。尤其是官方文档更是没有解释清楚。上面这些是我最近使用layer传递数据的一些个人见解和注释,希望能够帮到向我这样的初学者理解程序的实现过程和原理。