layui 父页面获取弹窗传递的值 和 父页面传值给子弹窗的方法

 

父级页面是列表页，当父级页面点击搜索新闻时，弹出子窗口（type:2）,并在子窗口中进行关键字的输入，由ajax提交到后台模糊搜索匹配到对应的字段，ajax请求成功后并关闭当前打开的子窗口，关闭子窗口的同时将查询到的数据传递回去给父页面。

 

思路：（在父页面中定义方法，子页面中拿到父页面的方法，用方法的参数进行传值）

 

1.实现打开子窗口，子窗口的type:2,在页面中进行表单数据的获取，进行ajax请求后台查询数据。

 

2.后台数据请求成功后，在子窗口中通过parent.layer.getFrameIndex(window.name)和parent.layer.close(index);方法自动关闭子窗口。

 

3.由于子窗口关闭后只剩下父页面，父页面并不能直接拿到子窗口请求的数据，这时需要在父页面加载方法$(document).ready(function() {})之后写一个接受数据的方法。参数为子窗口要返回的数据即可。

 

下面是图：

 

1.点击蓝色圈的按钮弹出子窗口

 

窗口中输入完数据进行ajax的提交查询

代码：

父级页面打开子窗口：

 

 

父级页面接收子窗口返回的数据的方法：

子页面请求的数据：（由于进行的是模糊查找，所以用户可能某些字段并不会输入，但是ajax传递的参数必须存在，则需要对数据进行重新的定义）；

 

//点击提交按钮 $("#submit").click(function(){        //以下是对数据进行定义，防止用户某些字段不提交时ajax报错        var titlename=null,            titleauthor=null,            titletype=null,            titletime=null,            titlecontent=null,            titlesstarte=null;         if($("#newtitle").val()!=""){            titlename=$("#newtitle").val();        }        if($("#newauthor").val()!=""){            titleauthor=$("#newtitle").val();        }        if($("#typeselectBox").val()!=""){            titletype=$("#typeselectBox").val();        }        if($("#newetime").val()!=""){            titletime=$("#newetime").val();        }        if($("#newcontent").val()!=""){            titlecontent=$("#newcontent").val();        }        if($("input[name=titlesstarte]:checked").val()!=""){            titlesstarte=$("input[name=titlesstarte]:checked").val();        }         //ajax请求后台        $.ajax({            url: '/JavaWeb/NewsFind',            type: 'POST',            dataType: 'json',            data: {                titlename: titlename,                titleauthor:titleauthor,                titletype:titletype,                titletime:titletime,                titlecontent:titlecontent,                titlesstarte:titlesstarte             },        })        .done(function(data) {            console.log(data);            layer.msg("查找成功");             //这里使用parent获取之前在父级页面中定义的接收子页面传递数据的方法，并将ajax的数据作为参数传递回去            parent.getChildrenData(data);             //等待900毫秒后自动进行当前子窗口的关闭            setTimeout(function(){                //当你在iframe页面关闭自身时                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引                parent.layer.close(index); //再执行关闭            },900);        })        .fail(function(data) {            console.log(data);             layer.msg("查找失败"+data);        });     });

此时当子窗口自动关闭后父页面也能拿到子窗口中ajax请求后台的数据。