layer弹出层子父页面传值 以及函数调用（其中包括从子页面重载父页面table）

这段时间使用layer开发项目，期间碰到了弹出层子父页面传值以调用函数的问题，解决之后在这里记录一下。

1. 第一种情况：直接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

Layui(二) 主窗体和iframe层（弹窗）相互传值

为了简练和减少编写时间，直接上代码（好吧，我承认我想偷懒了）

目的：点击文本域则弹出一个iframe层，并将选中的值回传到文本域

 

主页面代码：

1. 定义一个文本域；data-type——绑定事件 （备注：事件名随便定义，但必须和JS中的事件名一致）
    

    <textarea placeholder="请输入内容" class="layui-textarea" id="permission-group"

   data-type="select"></textarea>

2. JS区域代码  
    

   var active = {

   // 对应第一点的事件名 data-type='select'

   • select: function () {

   • layer.open({

   • type: 2

   • , title: '选择设备'

   • , content: 'dooriframe.html'

   • , maxmin: true

   • , area: ['550px', '550px']

   • , btn: ['确定', '取消']

   • , yes: function (index, layero) {

   • var iframe = window['layui-layer-iframe' + index]; // 找到iframe层

   • // iframe.child 将文本域中的值传到iframe层中

   • iframe.child(document.getElementById('permission-group').value);

   • //点击确认触发 iframe 内容中的按钮提交

   • var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");

   • submit.click();

   • }

   • });

   • }

   • };

   • $('.layui-textarea').on('click', function () {

   • var type = $(this).data('type');

   • active[type] ? active[type].call(this) : '';

   • });

    

3. iframe.child()报错原因   ① 若只在主页面中会报错；② 在iframe层页面不是全局函数会报错
   
   

iframe层代码：

1. iframe层代码 ( '确认添加' 和 ‘确认编辑’  value值可随意定义，按钮一定要添加，否则iframe层的确定按钮无效果)
    

   <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"

   style="padding: 20px 30px 0 0;">

   • <form class="layui-form">

   • <div class="layui-form-item">

   • <div class="layui-input-inline" style="margin-top: 40px">

   • <select name="control" id="control" lay-filter="control">

   • <option value="">请选择控制器</option>

   • </select>

   • </div>

   • <div class="layui-input-inline" style="margin-top: 40px">

   • <select name="doors" id="doors" lay-filter="doors">

   • <option value="">请选择门点</option>

   • </select>

   • </div>

   • </div>

   • </form>

   • <div class="layui-form-item layui-hide">

   • <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit"

   • value="确认添加">

   • <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit"

   • value="确认编辑">

   • </div>

   • </div>

2. JS代码 （单独写这个js）
    

   <script>

   function child(data) {

   • console.log(data)

   • }

   • </script>

3. iframe层向主页面传值（JS代码）
    

   //监听提交

   form.on('submit(layuiadmin-app-form-submit)', function (data) {

   • var field = JSON.stringify(data.field.control); //获取提交的字段

   • var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

   • //提交 Ajax 成功后，关闭当前弹层并重载表格

   • //$.ajax({});

   • //在主页面找到存放iframe值得id

   • parent.$("#permission-group").val(field);

   • parent.layer.close(index); //再执行关闭

   • });