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

作者最新文章