一看標題可能大家都比較模糊，我就去特意做了一個gif的演示圖，結果發現太小了，就改成了現在的視頻，視頻地址：

使用layui實現對數據的增刪改查

演示案例實現技術是：ssh框架+layui表格，即簡單的對單表數據庫做了個增刪改查。

相信大家看過視頻之后，已經知道大體的業務流程，我在這里在簡單的說明一下。
1.默認進入首頁default.jsp，進入該頁面之前將所有數據查詢出來，在控制器中放入對象集合，在頁面上直接遍歷數據即可。

控制器中的代碼：

//查詢全部年級public String getGradeAll(){gradeList = gradeService.getGradeAll();return "success";}

default.jsp中的主要代碼：

<table class="layui-table admin-table"><thead><tr><th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th><th>編號</th><th>名稱</th><th>操作</th></tr></thead><tbody id="content"><c:forEach items="${gradeList }" var="grade"><tr><td style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></td><td>${grade.gid }</td><td>${grade.gname }</td><td><a href="javascript:void up(${grade.gid }) ;" id="update" class="layui-btn layui-btn-warm layui-btn-small">修改</a><a href="delGradeById?gid=${grade.gid }" class="layui-btn layui-btn-danger layui-btn-small">刪除</a></td></tr></c:forEach></tbody> </table>

點擊添加的按鈕：

利用layui自帶的好看彈出層，彈出來一個添加的頁面層，代碼如下：
添加的按鈕：

<blockquote class="layui-elem-quote"><a href="javascript:;" class="layui-btn layui-btn-small" id="add"><i class="layui-icon">&#xe608;</i> 添加信息</a> </blockquote>

按鈕事件：

/* 添加彈出頁面 */ $("#add").click(function(){layui.use('layer', function(){var layer = layui.layer;/* 彈出一個頁面 */layer.open({type: 2, content: 'saveGrade.jsp' //彈出來一個添加年級的頁面}); }); });

添加頁面的代碼：

<form class="layui-form" action="" id="forms"><div class="layui-form-item"><label class="layui-form-label">年級名稱</label><div class="layui-input-block"><input type="text" name="grade.gname" lay-verify="title" autocomplete="off" placeholder="請輸入標題" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button id="save" class="layui-btn" lay-submit="" lay-filter="demo1">添加</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div> </form>

點擊添加時，利用ajax異步刷新，可以避免添加的彈出層關不掉，或者查詢全部的數據沒有及時更新，下面是添加時主要的代碼：

<!-- 引入jquery --> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){$("#save").click(function(){//執行添加的操作ajax$.ajax({cache:true,type:"post",url:"saveGrade",data:$("#forms").serialize(),async:false,success:function(){window.parent.location.href="getGradeAll";}})}); }) </script>

這個問題當時上網查找了好久沒有解決掉，最后試著使用ajax結合網上的其他解決方法才得以解決。

后面的修改和添加的方法也是一樣的。

總結

以上是生活随笔為你收集整理的使用layui弹框实现添加时，当添加成功之后如何进行关闭当前窗口刷新父页面的数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。