EasyUI效果--弹出页面效果

    上一篇博客写了《EasyUI效果--右击菜单》，接下来写一下弹出页面效果。这个效果就是，我写一个正常的页面，然后在另一个页面写上事件，将这个页面整个作为弹出页面进行弹出.这个做的原因是,这个正常的页面即可以作为正常页面存在,也可以通过方法弹出显示,而不用跳转过去,算是方便查看吧.

    首先,setstudentno.jsp页面上有一个查看学生信息的链接,可以弹出studentnolist.jsp页面,该页面显示的是学生基本信息.其中链接的代码如下,

<pre name="code" class="html"><a  href="javascript:void(0)" class="easyui-linkbutton"
	iconCls="icon-search" plain="true" οnclick="queryAllStudentNo()">查看学生信息</a>

    在queryAllStudentNo()方法中,调用showMyWindow方法,控制窗口大小,并控制跳转到哪个页面.

<pre name="code" class="javascript"><%--弹出查询学生信息的页面-- start --lyl--2期 --2015年2月5日21:41:40-- --%>
		function queryAllStudentNo() {
			showMyWindow("弹出查询页面",
					'${pageContext.request.contextPath}/list?page=1&rows=10',
					800, 540);
		}
<%--弹出查询学生信息的页面-- end --lyl--2期 --2015年2月5日21:41:40-- --%>

    其中showMyWindow方法的弹出框代码是这样的.在页面加载时,在body中添加一个叫myWindow的div,然后showMyWindows就是在这个div的位置上,显示弹出框(窗口).在EasyUI的window窗口(http://www.jeasyui.net/plugins/180.html)中,对下面的代码可以充分了解.

<pre name="code" class="javascript"><%--弹出框效果-- start --lyl--2期 --2015年2月5日21:41:40-- --%>	
	$(function() {
		$('body').append('<div id="myWindow" class="easyui-dialog" closed="true"></div>');
	});
	function showMyWindow(title, href, width, height, modal, minimizable,
			maximizable) {
		$('#myWindow').window(
						{
							title : title,
							width : width === undefined ? 600 : width,
							height : height === undefined ? 400 : height,
							content : '<iframe scrolling="yes" frameborder="0"  src="'
									+ href
									+ '" style="width:100%;height:98%;"></iframe>',
							modal : modal === undefined ? true : modal,
							minimizable : minimizable === undefined ? false
									: minimizable,
							maximizable : maximizable === undefined ? false
									: maximizable,
							shadow : false,
							cache : false,
							closed : false,
							collapsible : false,
							resizable : false,
							loadingMessage : '正在加载数据，请稍等片刻......'
						});
	}

<%--弹出框效果-- start --lyl--2期 --2015年2月5日21:41:40-- --%>	

    $('#myWindow').window()可以创建窗口,其中属性标题必须有,长宽没有就默认为600和400,content内容的话,用带滚动条的iframe显示,显示的url在src中设置.默认是模态窗口,默认不显示最大化和最小化按钮,还有shadow不会显示阴影,不缓存,closed不关闭窗口(若设置为true,由于关闭窗口,所以窗口是打不开的),collapsible不显示折叠按钮,不能修改大小,以及设置加载时的信息.

    其中基本都在这里能够看到,但是content和loadingMessage属性是在哪的?在面板中,图中最上面的那就话就能说明了,window是扩展自$.fn.panel.defaults,而dialog是扩展自$.fn.window.defaults.

    到现在为止,弹出窗弹出,那么在content中显示的内容是什么?在url='${pageContext.request.contextPath}/list?page=1&rows=10',是如何显示到jsp页面?

    在Controller中,接收到分发的list请求,而该请求会返回"/studentnolist"字符串.

/**
 * 学生信息列表  lyl 2015年2月4日09:36:47
 *
 * @return 查看所有学生信息列表 
 */
@RequestMapping("/list")
public String listStudent() {
	return "studentnolist";
}

    然后在spring-mvc.xml的配置文件的作用下，添加上前缀和后缀,拼凑为/WEB-INF/jsp/studentnolist.jsp.

<! --定义一个视图解析器 - 添加前缀和后缀 -->
<bean id="viewResolver"
	class="org.springframework.web.servlet.view.InternalResourceViewResolver"

p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />

     对于viewResolver，这个文章给了详细的说明，Springmvc框架入门。

     对于spring mvc的框架，给了一幅图，图中说明了，所有的用户请求，经过前端控制器的分发，分发到控制器Contoller来进行处理，处理完毕之后，回到前端控制器，然后再经过视图模板修饰一下，再显示给用户。其中选择什么样的视图需要ViewResolver(视图解析器)来控制,不在配置文件中配置,就默认为InternalResourceViewResolver,这个很适合显示jsp和html页面,它会创建一个JSTLView,并且把任务委托给Servlet内部的RequestDispatcher去呈现资源,可以将逻辑视图名字解析为一个路径,最后Servlet将回应通过制定的jsp呈现给用户.

    所以,最后,就看到一个弹出框上显示了一个页面的信息.

    以上就是我做的弹出页面效果,很简单,就是用了窗口的.window()来创建弹出框,并设置了一些属性.了解了panel,window和dialog的继承关系,以及对iframe的简单设置.