jQuery EasyUI框架 modalwindow 初体验

jQuery EasyUI是前端中设计页面的框架，功能比较强大，这里我用到的只是下载之后demo示例中的 modalwindow这个显示效果。还有很多其他页面组件的设计上可以使用这个框架，可以使前端变得更美观。

官方demo中的效果如图：

这里我用到的是在点击修改按钮，就跳出修改的框，同时传入这个网页框要修改的信息，在网页框的保存按钮上注册事件，提交到后台中更新教室信息。

1.将下载解压之后的EasyUI 框架拷贝到项目的web-content目录下

2.按照demo中的设置前端代码

（1）将 库文件 和 一些样式表文件链接到页面上，可以复制demo上引入的代码这里因为我的页面是访问action方式访问的，所以引入的时候改为根目录，否则链接不到这些文件。这里EasyUI中自带了jQuery的文件，这里可以引入使用。

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/EasyUI/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/EasyUI/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/EasyUI/demo/demo.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/TableStyle.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-3.1.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/EasyUI/jquery.easyui.min.js"></script>

（2）在一个div中设置弹窗中的内容  这里弹出页面框的宽 高等属性都是可以设置的。

<div id="w" class="easyui-window" title="修改教室信息" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">
		<table class="bordered">
		<tr><td>教室名称：</td><td><input type="hidden" name="room.id"/>
		<input type="text" name="room.name" />
		</td></tr>
		<tr>
		<td>教室地址：</td><td><input type="text" name="room.address" /></td>
		</tr>
		<tr><td colspan="2"><input type="button" value="提交" id="save"/></tr>
		</table>
	</div>

（3）根据demo中的案例，可以在脚本中为修改按钮绑定事件，$('#w').window('open');  将弹窗这个div打开

	$(".modify").each(function(index, element) {
        $(this).click(function(){
			$.post("${pageContext.request.contextPath}/room/getroombyid",{"room.id":this.lang},function(data){
				var info=data.split("!");
				$("#w [name='room.id']").val(info[0]);
				$("#w [name='room.name']").val(info[1]);
				$("#w [name='room.address']").val(info[2]);
			})
			$('#w').window('open');
		});
    });

（4）为弹窗中的按钮绑定点击事件，这里可以设置点击之后直接关闭弹窗   $('#w').window('close');

	$("#save").click(function(){
		$.post("${pageContext.request.contextPath}/room/updateroom",{"room.id":$("#w [name='room.id']").val(),
		"room.name":$("#w [name='room.name']").val(),"room.address":$("#w [name='room.address']").val()},
		function(data){

			$('#w').window('close');
			window.location="${pageContext.request.contextPath}/room/main?pageNo="+$("#pageNo").val();

		})
	});

3.显示结果：