微商网站开发合同,建设网站的新闻,搜索引擎数据库,网站开发哪家公司好最近有个项目使用Layui框架进行后端系统的界面搭建#xff0c;其中Layui框架中的Layer组件在项目中会用得非常多。且有些功能会遇到子窗口完成数据的提交后#xff0c;进行关闭同时会刷新父窗口的数据#xff0c;所以此文章分享一下《如何实现在Layui框架中完成父窗的刷新功…最近有个项目使用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_iddata.section_id§ion_namedata.section_name§ion_pIddata.section_pId§ion_pNamedata.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() {} 回调函数如果还有朋友们对上面代码不是清楚的可以在下方留言
