首页 > 代码库 > spring-mvc 与jquery-easyui-layout整合
spring-mvc 与jquery-easyui-layout整合
开发环境
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的相关配置,这里需要注意的是
schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"这个的配置主要是用来解决前台对于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=http://www.mamicode.com/"${pageContext.request.contextPath}/themes/default/easyui.css">><span style="color:#ff0000;"><strong>1:<%@ page isELIgnored="false"%></strong></span>这个主要还是用来去启用在jsp内书写的el表达式。
<strong><span style="color:#ff0000;">2.${pageContext.request.contextPath}</span></strong>这是主要是用来获取web端的资源根目录。
资源页读取配置
添加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=http://www.mamicode.com/"'+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>
后序
spring-mvc 与jquery-easyui-layout整合
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。