asp子窗口读取父窗口数据_如何实现在Layui框架中完成父窗口刷新（更新）

最近有个项目使用Layui框架进行后端系统的界面搭建&＃xff0c;其中Layui框架中的Layer组件在项目中会用得非常多。且有些功能会遇到子窗口完成数据的提交后&＃xff0c;进行关闭同时会刷新父窗口的数据&＃xff0c;所以此文章分享一下《如何实现在Layui框架中完成父窗的刷新功能》

当然这里有朋友就会吐槽&＃xff0c;现在的项目都是基于SpringBoot &＃43; Vue的前后端分离开发。在这里我要说明一下此文章是分享给目前学习 或 正在使用Layui框架的朋友们

先看一个动态的gif效果图

主要技术栈&＃xff1a;SpringBoot &＃43; Redis &＃43; Layui &＃43; MySQL

这里就根据动态的gif效果图&＃xff0c;来说明一下前端效果的实现

前端流程&＃xff1a;

1. 通过Layui的Table组件展示数据
2. 点击“编辑”按钮&＃xff0c;进入编辑页面(第一级子窗口)
3. 再次选择要变更“上级部门”按钮&＃xff0c;进入选择“上级部门”的子窗口(第二级子窗口)
4. 确认所有的编辑数据&＃xff0c;然后进行保存
5. 如果保存成功&＃xff0c;则刷性父窗口

编辑页面 - 子窗口 - 前端代码

部门管理 - 新增

选择即将变更“上级部门” - 弹出子窗口 - 前端代码

部门管理 - 更新变更

父窗窗口 - 刷新 - 核心代码

table.on(&＃39;tool(currentTableFilter)&＃39;, function (obj) { var data &＃61; obj.data; if (obj.event &＃61;&＃61;&＃61; &＃39;edit&＃39;) { var index &＃61; layer.open({ title: &＃39;编辑用户&＃39;, type: 2, shade: 0.2, maxmin:true, shadeClose: true, area: [&＃39;100%&＃39;, &＃39;100%&＃39;], content: &＃39;/section/edit?section_id&＃61;&＃39;&＃43;data.section_id&＃43;"§ion_name&＃61;"&＃43;data.section_name&＃43;"§ion_pId&＃61;"&＃43;data.section_pId&＃43;"§ion_pName&＃61;"&＃43;data.section_pName, success: function(layero, index) { // 回调函数用于父窗口传递数据到子窗口 // 代码根据实际情况进行编写 }, end: function() { // 刷新父窗口 - 刷新Table - 时间延迟 等待弹出层消失后 setTimeout(function(){ window.location.reload(); }, 2000); } }); $(window).on("resize", function () { layer.full(index); }); return false; } else if (obj.event &＃61;&＃61;&＃61; &＃39;delete&＃39;) { layer.confirm(&＃39;真的删除行么&＃39;, function (index) { $.ajax({ url: &＃39;deleteDsSectionById&＃39;, type: &＃39;GET&＃39;, data: {&＃39;section_id&＃39;: data.section_id}, dataType: &＃39;json&＃39;, success: function(res) { if(res.code > 0) { layer.msg(&＃39;删除成功...&＃39;) obj.del(); setTimeout(function() { location.reload(); }, 2000); } else { layer.msg(&＃39;删除失败...&＃39;) } } }); layer.close(index); }); } });

注意&＃xff0c;如果实现关闭子窗口&＃xff0c;父窗口进行刷新&＃xff0c;一定要在 "layer.open" 加入 "end:function() {}" 回调函数

如果还有朋友们对上面代码不是清楚的&＃xff0c;可以在下方留言