可能看到標題的你沒有明白我到底想表達啥？（我起名字時刪改多遍，這是最終定下來的），不過，為了讓大家看的明白，我專門去做了個演示視頻：

演示案例使用的技術：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如何实现添加数据时关闭页面层，并实时刷新表格数据？的全部內容，希望文章能夠幫你解決所遇到的問題。

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