使用layui彈框實現添加時，當添加成功之後如何進行關閉當前窗口刷新父頁面的數據

一看標題可能大家都比較模糊，我就去特意做了一個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結合網上的其他解決方法才得以解決。

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