首页 > 代码库 > spring-mvc 与jquery-easyui-layout整合

spring-mvc 与jquery-easyui-layout整合

2024-08-10 00:22:29   221人阅读

开发环境


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 &copy; 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整合


联系
我们