最近有個項目使用Layui框架進行后端系統(tǒng)的界面搭建，其中Layui框架中的Layer組件在項目中會用得非常多。且有些功能會遇到子窗口完成數(shù)據(jù)的提交后，進行關(guān)閉同時會刷新父窗口的數(shù)據(jù)，所以此文章分享一下《如何實現(xiàn)在Layui框架中完成父窗的刷新功能》

當然這里有朋友就會吐槽，現(xiàn)在的項目都是基于SpringBoot + Vue的前后端分離開發(fā)。在這里我要說明一下此文章是分享給目前學習 或 正在使用Layui框架的朋友們

先看一個動態(tài)的gif效果圖

主要技術(shù)棧：SpringBoot + Redis + Layui + MySQL

這里就根據(jù)動態(tài)的gif效果圖，來說明一下前端效果的實現(xiàn)

前端流程：

通過Layui的Table組件展示數(shù)據(jù)

點擊“編輯”按鈕，進入編輯頁面(第一級子窗口)

再次選擇要變更“上級部門”按鈕，進入選擇“上級部門”的子窗口(第二級子窗口)

確認所有的編輯數(shù)據(jù)，然后進行保存

如果保存成功，則刷性父窗口

編輯頁面 - 子窗口 - 前端代碼

部門管理 - 新增 部門名稱 填寫管理部門的名稱 上級部門 目前所屬部門： 選擇變更部門 填寫上級部門的名稱 確認保存

選擇即將變更“上級部門” - 彈出子窗口 - 前端代碼

部門管理 - 更新變更

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

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) { // 回調(diào)函數(shù)用于父窗口傳遞數(shù)據(jù)到子窗口 // 代碼根據(jù)實際情況進行編寫 }, 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); }); } });

注意，如果實現(xiàn)關(guān)閉子窗口，父窗口進行刷新，一定要在 "layer.open" 加入 "end:function() {}" 回調(diào)函數(shù)

如果還有朋友們對上面代碼不是清楚的，可以在下方留言

總結(jié)

以上是生活随笔為你收集整理的layui table reload post请求_如何实现在Layui框架中完成父窗口刷新（更新）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。