技术联盟

LayUI实战之layui-layer.open使用

LayUI实战之layui.layer.open使用

有时候我们有这么一种需求,在开发表单界面的时候,有一行指定用户需求时,需要查询用户,由于用户是独立的表和模块,数据量大的时候,

我们不能一次查找所有数据,放到Select中供用户进行选择,这时候基本上都会需要弹出一个界面,让用户进行查询及选择,选择之后,把选择的数据在传递到上一个打开的界面;

没错就是通过layui.layer.open进行实现

layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

接下来一步一步进行操作

第一步 创建工程

根据自己的爱好,选择顺手的开发工具,进行创建web项目。这里我创建一个空项目

image-20200103150452118image-20200103150528226

第二步 添加Layui js和css

通过官网 进行下载 https://www.layui.com/

下载之后进行解压 把layui文件夹添加到项目中(参考下图)

image-20200103150745298

第三步 添加2个html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>LayUI测试</title>
   <link href="layui/css/layui.css"/>

   <script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-form-item " >
   <label class="layui-form-label">选择</label>
   <div class="layui-input-block" >
       <button style="width: 15%" class="layui-btn layui-btn-radius layui-btn-warm"   type="button" id="sel_good"  lay-filter="sel_good">点击选择</button>
   </div>
</div>
<div class="layui-form-item selectGood" >
   <label class="layui-form-label">所选</label>
   <div class="layui-input-block" id="good" >
       <input type="text" id="goodName"   autocomplete="off"  class="layui-input">
       <input type="hidden" id="goodId" name="goodId"  autocomplete="off"  class="layui-input">
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
   $("#sel_good").on("click", function () {
       var e = layui.layer.open({
           title: "选择",
           type: 2,
           move: false,
           anim: 1,
           skin: "larry-green",
           offset: '10px',
           area: [1024*0.9 + "px", 800*0.9 + "px"],
           content: "one.html",//后台请求地址
           success: function (layero, index) {
               console.log(layero, index);
               console.log("==============================================");
               var body = layui.layer.getChildFrame('body', index);
               console.log(body);
           },
           btn: ['按钮一', '按钮二', '按钮三'],//默认 按钮一 执行的yes  btn2 是按钮2  btn3是按钮三
           yes: function(index, layero){
               console.log(layero, index);
               //do something
               layer.close(index); //如果设定了yes回调,需进行手工关闭
           }
       });
   });
   //https://www.layui.com/doc/modules/layer.html#btn
</script>
</body>
</html>

one.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

   <link href="layui/css/layui.css"/>

   <script src="layui/layui.all.js"></script>
</head>
<body>

<button id="sel_good">这是选择子界面</button>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
   $("#sel_good").on("click", function () {
       window.parent.document.getElementById("goodName").value='MacBook pro 笔记本';
       window.parent.document.getElementById("goodId").value=1;
       var index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引
       // parent.layer.close(index); //再执行关闭
       // layer.close(index);


       var e = layui.layer.open({
           title: "选择",
           type: 1,
           move: false,
           anim: 1,
           skin: "larry-green",
           offset: '10px',
           area: [400 + "px", 300+ "px"],
           content: "再弹出一个试试!!!",//后台请求地址
           btn: ['确定'],//默认 按钮一 执行的yes  btn2 是按钮2  btn3是按钮三
           yes: function(index, layero){
               console.log(layero, index);
               //do something
               layer.close(index); //如果设定了yes回调,需进行手工关闭
           }
       });
   });
</script>
</body>
</html>

自己copy文件运行先看看效果是否是这样

image-20200103151131659

image-20200103151153416

image-20200103151211296

image-20200103151238380

第四步 相关说明

$("#sel_good").on("click", function () {
    var e = layui.layer.open({
        title: "选择",
        type: 2,
        move: false,
        anim: 1,
        skin: "larry-green",
        offset: '10px',
        area: [1024*0.9 + "px", 800*0.9 + "px"],
        content: "one.html",//后台请求地址
        success: function (layero, index) {
            console.log(layero, index);
            console.log("==============================================");
            var body = layui.layer.getChildFrame('body', index);
            console.log(body);
        },
        btn: ['按钮一', '按钮二', '按钮三'],//默认 按钮一 执行的yes  btn2 是按钮2  btn3是按钮三
        yes: function(index, layero){
            console.log(layero, index);
            //do something
            layer.close(index); //如果设定了yes回调,需进行手工关闭
        }
    });
});

这里的type=2表示已iframe的方式进行打开文件

content: "one.html", 表示要打开的界面

success表示成功打开界面执行的方法

btn是表示打开界面时下面显示的按钮 //默认 按钮一 执行的yes btn2 是按钮2 btn3是按钮三

yes表是第一个按钮执行的方法

更多说明请参考官网https://www.layui.com/doc/modules/layer.html

$("#sel_good").on("click", function () {
    window.parent.document.getElementById("goodName").value='MacBook pro 笔记本';
    window.parent.document.getElementById("goodId").value=1;
    var index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引
    // parent.layer.close(index); //再执行关闭
    // layer.close(index);


    var e = layui.layer.open({
        title: "选择",
        type: 1,
        move: false,
        anim: 1,
        skin: "larry-green",
        offset: '10px',
        area: [400 + "px", 300+ "px"],
        content: "再弹出一个试试!!!",//后台请求地址
        btn: ['确定'],//默认 按钮一 执行的yes  btn2 是按钮2  btn3是按钮三
        yes: function(index, layero){
            console.log(layero, index);
            //do something
            layer.close(index); //如果设定了yes回调,需进行手工关闭
        }
    });
});

typpe = 1 layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

window.parent.document.getElementById("goodName").value='MacBook pro 笔记本';

window.parent.document.getElementById("goodId").value=1;

这里对上一个界面的数据的回填

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

parent.layer.close(index); 这个表示关闭子界面

layer.close(index);表示关闭当前界面

Share this:

码字很辛苦,转载请注明来自技术联盟《LayUI实战之layui-layer.open使用》

评论