本文详解 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 弹出层数据回传的具体解决方案,供开发者参考。