LayUI实战之layui.layer.open使用
有时候我们有这么一种需求，在开发表单界面的时候，有一行指定用户需求时，需要查询用户，由于用户是独立的表和模块，数据量大的时候，
我们不能一次查找所有数据，放到Select中供用户进行选择，这时候基本上都会需要弹出一个界面，让用户进行查询及选择，选择之后，把选择的数据在传递到上一个打开的界面；
…
没错就是通过layui.layer.open进行实现
_layer_是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
接下来一步一步进行操作
第一步 创建工程
根据自己的爱好，选择顺手的开发工具，进行创建web项目。这里我创建一个空项目
第二步 添加Layui js和css
通过官网 进行下载 https://www.layui.com/
下载之后进行解压 把layui文件夹添加到项目中（参考下图）
第三步 添加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: [10240.9 + “px”, 8000.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文件运行先看看效果是否是这样
第四步 相关说明
$("#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种层类型。可传入的值有：__（信息框，默认）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);表示关闭当前界面
💬 评论