spring-mvc 与jquery-easyui整合
开发环境
spring-webmvc-4.0.8.RELEASE
Jquery-easyui-1.4.0
以上是在整合layout页面所用的各自版本号。
配置
Spring-mvc.xml配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:jee="http://www.springframework.org/schema/jee" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-2.5.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd "> <mvc:annotation-driven /> <!-- EasyUI样式，JS配置 --> <mvc:resources location="/demo/" mapping="/demo/**"></mvc:resources> <mvc:resources location="/locale/" mapping="/locale/**"></mvc:resources> <mvc:resources location="/plugins/" mapping="/demo/**"></mvc:resources> <mvc:resources location="/themes/" mapping="/themes/**"></mvc:resources> <mvc:resources location="/page/" mapping="/page/**"></mvc:resources> <mvc:resources location="/" mapping="/**"></mvc:resources> </beans>
这里需要注意的就是在文件头信息内配置
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
这个主要还是配合后面针对MVC对于特定资源拦截所做的处理，不然对于前台js以及css等资源是无法去访问的。
Web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name>Archetype Created Web Application</display-name>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:applicationContext-*.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>其实这个主要还是针对特定的action的相关配置，这里需要注意的是
<span style="font-family:KaiTi_GB2312;font-size:18px;">schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"</span>
这个的配置主要是用来解决前台对于jsp内去书写EL表达式来进行的处理。
jsp配置
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 启用EL表达式 -->
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>模板管理</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/demo/demo.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/themes/default/easyui.css"><span style="color:#ff0000;"><strong>1：<%@ page isELIgnored="false"%></strong></span>
<strong><span style="color:#ff0000;">2.${pageContext.request.contextPath}</span></strong>
资源页读取配置
添加tab读取资源文件
这里demo内还是用的是实在的jsp页面，其实在开发过程中，每个tab的增加都需要访问还是各自的资源文件对应
的controller或者发布好的jndiname即可。
js 函数
<script type="text/javascript">
/**
* 创建新选项卡
* @param tabId 选项卡id
* @param title 选项卡标题
* @param url 选项卡远程调用路径
*/
function addTab(tabId,title,url){
//如果当前id的tab不存在则创建一个tab
if($("#"+tabId).html()==null){
var name = 'iframe_'+tabId;
$('#centerTab').tabs('add',{
title: title,
closable:true,
cache : false,
//注：使用iframe即可防止同一个页面出现js和css冲突的问题
content : '<iframe name="'+name+'"id="'+tabId+'"src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="auto" ></iframe>'
});
}
} 页面的配置
这个主要还是根据jquery定义好的class直接用就可以了。
!-- 主界面的框架 -->
<body class="easyui-layout">
<!-- 北边区域 -->
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">考试系统</div>
<!-- 各个模块 -->
<div data-options="region:'west',split:true,title:'功能索引'" style="width:150px;padding:10px;">
<!-- 子模块：模板管理 -->
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="模板配置" style="padding:10px;">
<li><a href="javascript:addTab('tabId_templet','模板管理','templetMain.jsp');">模板管理</a></li>
<li><a href="javascript:addTab('tabId_datagrid','datagrid模板','page/datagrid.jsp');">datagrid</a></li>
</div>
</div>
</div>
<!-- 东部区域 -->
<div data-options="region:'east',split:true" style="width:10px;padding:10px;"></div>
<!-- 底部 -->
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">
<div id="footer">Copyright © 2014 TGB-9 廊坊师范学院信息技术提高班</div>
</div>
<!-- 中央布局 -->
<div data-options="region:'center'" fit="true" border="false" >
<div class="easyui-tabs" id="centerTab" fit="true" border="false">
<div title="欢迎页" style="padding:20px;overflow:hidden;">
<div style="margin-top:20px;">
<h3>你好，欢迎来到系统</h3>
</div>
</div>
</div>
</div>
</body>
效果图
