Layui 弹出层数据回传实现方法
作者:清欢时间:2026-10-23 13:06:08浏览:262
本文详解 Layui 弹出层如何向父页面回传数据。核心思路是在子页面定义回调函数,父页面通过 window["layui-layer-iframe" + index] 获取子页面上下文并调用该函数,从而在点击确定按钮时获取返回值并关闭弹窗。
Layui 弹出层数据回传实现
具体实现步骤如下所示:
layer.open({
type: 2,
title: "设置围栏",
shadeClose: true,
shade: 0.4,
area: ['90%', '90%'],
content: "/ElectronicFence/Map?id=" + id + "&shapeType=" + shapeType,
btn: ['确定','关闭'],
yes: function(index){
//当点击‘确定'按钮的时候,获取弹出层返回的值
var res = window["layui-layer-iframe" + index].callbackdata();
//打印返回的值,看是否有我们想返回的值。
console.log(res);
//最后关闭弹出层
layer.close(index);
},
cancel: function(){
//右上角关闭回调
}
});
关键点说明:
var res = window["layui-layer-iframe" + index].callbackdata();
在上述代码中,'callbackdata' 是子页面(弹出层内部)所定义的函数。这一设计揭示了数据回传的关键:该函数的职责正是将数据返回给父页面。
在弹出层页面中添加以下代码:
<script>
var callbackdata = function () {
var data = {
username: 'zhangfj'
};
return data;
}
</script>
上述代码即为弹出层内部的 JavaScript 逻辑,其中定义了 'callbackdata' 函数,用于将指定数据返回给调用该弹出层的父页面。
以上即为 Layui 弹出层数据回传的具体解决方案,供开发者参考。
作者最新文章
JS转整数出现NaN怎么办?常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz:主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15
