最近有个项目使用Layui框架进行后端系统的界面搭建，其中Layui框架中的Layer组件在项目中会用得非常多。且有些功能会遇到子窗口完成数据的提交后，进行关闭同时会刷新父窗口的数据，所以此文章分享一下《如何实现在Layui框架中完成父窗的刷新功能》
当然这里有朋友就会吐槽，现在的项目都是基于SpringBoot + Vue的前后端分离开发。在这里我要说明一下此文章是分享给目前学习 或 正在使用Layui框架的朋友们
先看一个动态的gif效果图
主要技术栈：SpringBoot + Redis + Layui + MySQL
这里就根据动态的gif效果图，来说明一下前端效果的实现
前端流程：
- 通过Layui的Table组件展示数据
- 点击“编辑”按钮，进入编辑页面(第一级子窗口)
- 再次选择要变更“上级部门”按钮，进入选择“上级部门”的子窗口(第二级子窗口)
- 确认所有的编辑数据，然后进行保存
- 如果保存成功，则刷性父窗口
编辑页面 - 子窗口 - 前端代码
部门管理 - 新增 部门名称 填写管理部门的名称 上级部门 目前所属部门： 选择变更部门 填写上级部门的名称 确认保存 
选择即将变更“上级部门” - 弹出子窗口 - 前端代码
部门管理 - 更新变更
父窗窗口 - 刷新 - 核心代码
table.on('tool(currentTableFilter)', function (obj) { var data = obj.data; if (obj.event === 'edit') { var index = layer.open({ title: '编辑用户', type: 2, shade: 0.2, maxmin:true, shadeClose: true, area: ['100%', '100%'], content: '/section/edit?section_id='+data.section_id+"§ion_name="+data.section_name+"§ion_pId="+data.section_pId+"§ion_pName="+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 === 'delete') { layer.confirm('真的删除行么', function (index) { $.ajax({ url: 'deleteDsSectionById', type: 'GET', data: {'section_id': data.section_id}, dataType: 'json', success: function(res) { if(res.code > 0) { layer.msg('删除成功...') obj.del(); setTimeout(function() { location.reload(); }, 2000); } else { layer.msg('删除失败...') } } }); layer.close(index); }); } });注意，如果实现关闭子窗口，父窗口进行刷新，一定要在 "layer.open" 加入 "end:function() {}" 回调函数
如果还有朋友们对上面代码不是清楚的，可以在下方留言
