`
kobe学java
  • 浏览: 257915 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Spring3 MVC + jQuery easyUI 做的ajax版本用户管理

 
阅读更多

 

上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic/1072244 ) ,反应还不错,本周闲来无事(外面又在下 雨 淹了不少地方啊)就试了一下Spring3 MVC + jQuery easyUI 做的ajax版本用户管理,因为之前做过一个项目是struts2 + jQuery easyUI 做的。对比了一下,发现 Spring3 MVC确实是比struts2方便啊,特别是对ajax的支持上,转换JSON内置了jackson,太方便了。还是先把jar包帖出来吧

还是要先配置web.xml文件,如下:

Xml代码   收藏代码
  1. <listener>  
  2.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
  3.     </listener>  
  4.   
  5.     <filter>  
  6.         <filter-name>Set Character Encoding</filter-name>  
  7.         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>  
  8.         <init-param>  
  9.             <param-name>encoding</param-name>  
  10.             <param-value>UTF-8</param-value>  
  11.         </init-param>  
  12.         <init-param>  
  13.             <param-name>forceEncoding</param-name>  
  14.             <param-value>true</param-value><!-- 强制进行转码 -->  
  15.         </init-param>  
  16.     </filter>  
  17.       
  18.     <filter-mapping>  
  19.         <filter-name>Set Character Encoding</filter-name>  
  20.         <url-pattern>/*</url-pattern>  
  21.     </filter-mapping>  
  22.       
  23.     <!-- 默认所对应的配置文件是WEB-INF下的{servlet-name}-servlet.xml,这里便是:spring3-servlet.xml -->  
  24.     <servlet>  
  25.         <servlet-name>spring3</servlet-name>  
  26.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
  27.         <load-on-startup>1</load-on-startup>  
  28.     </servlet>  
  29.   
  30.     <servlet-mapping>  
  31.         <servlet-name>spring3</servlet-name>  
  32.         <!-- 这里可以用 / 但不能用 /* ,拦截了所有请求会导致静态资源无法访问,所以要在spring3-servlet.xml中配置mvc:resources -->  
  33.         <url-pattern>/</url-pattern>  
  34.     </servlet-mapping>  

 然后在applicationContext.xml中简单配置一下数据源和sessionFactory还有声明一下事务处理,这个和之前那一版是一样的,如下:

Xml代码   收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  4.     xmlns:aop="http://www.springframework.org/schema/aop"  
  5.     xmlns:tx="http://www.springframework.org/schema/tx"  
  6.     xmlns:context="http://www.springframework.org/schema/context"  
  7.     xsi:schemaLocation="   
  8.           http://www.springframework.org/schema/beans   
  9.           http://www.springframework.org/schema/beans/spring-beans-3.0.xsd   
  10.           http://www.springframework.org/schema/tx   
  11.           http://www.springframework.org/schema/tx/spring-tx-3.0.xsd  
  12.           http://www.springframework.org/schema/context   
  13.           http://www.springframework.org/schema/context/spring-context-3.0.xsd   
  14.           http://www.springframework.org/schema/aop   
  15.           http://www.springframework.org/schema/aop/spring-aop-3.0.xsd" default-autowire="byName">  
  16.         <!-- 注意上面的default-autowire="byName",如果没有这个声明那么HibernateDaoSupport中的sessionFactory不会被注入 -->  
  17.         <!-- 约定优于配置,约定优于配置 -->  
  18.     <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">  
  19.         <property name="driverClassName" value="com.mysql.jdbc.Driver"></property>  
  20.         <property name="url" value="jdbc:mysql://127.0.0.1:3306/test"></property>  
  21.         <property name="username" value="root"></property>  
  22.         <property name="password" value="root"></property>  
  23.     </bean>  
  24.     <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">  
  25.         <property name="dataSource" ref="dataSource"/>  
  26.        <property name="mappingDirectoryLocations">  
  27.          <list><!-- 这里直接映射的pojo类所在的包,简单方便不用没次加一个pojo类都需要到这里来添加 -->  
  28.             <value>classpath:com/fsj/spring/model</value>  
  29.          </list>  
  30.        </property>  
  31.         <property name="hibernateProperties">  
  32.             <props>  
  33.                 <prop key="hibernate.dialect">  
  34.                     org.hibernate.dialect.MySQLDialect  
  35.                 </prop>  
  36.                 <prop key="hibernate.show_sql">  
  37.                     true  
  38.                 </prop>  
  39.             </props>  
  40.         </property>  
  41.     </bean>  
  42.       
  43.     <!-- 自动扫描组件,这里要把web下面的 controller去除,他们是在spring3-servlet.xml中配置的,如果不去除会影响事务管理的。-->  
  44.     <context:component-scan base-package="com.fsj.spring">  
  45.         <context:exclude-filter type="regex" expression="com.fsj.spring.web.*"/>  
  46.     </context:component-scan>  
  47.       
  48.     <!-- 下面是配置声明式事务管理的,个人感觉比用注解管理事务要简单方便 -->  
  49.     <bean id="txManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">  
  50.         <property name="sessionFactory" ref="sessionFactory"></property>  
  51.     </bean>  
  52.   
  53.     <aop:config>  
  54.         <aop:advisor pointcut="execution(* com.fsj.spring.service.*Service.*(..))" advice-ref="txAdvice"/>  
  55.     </aop:config>  
  56.   
  57.     <tx:advice id="txAdvice" transaction-manager="txManager">  
  58.         <tx:attributes>  
  59.             <tx:method name="get*" read-only="true"/>  
  60.             <tx:method name="query*" read-only="true"/>  
  61.             <tx:method name="find*" read-only="true"/>  
  62.             <tx:method name="load*" read-only="true"/>  
  63.             <tx:method name="*" rollback-for="Exception"/>  
  64.         </tx:attributes>  
  65.     </tx:advice>  
  66.       
  67.       
  68. </beans>  

 最后需要配置的就是spring mvc的配置文件spring3-servlet.xml了,这个和非ajax的版本稍微有点不一样,加入了对json数据转换的配置,因为我用的数据传输都是json类型的数据,如下:

Xml代码   收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"  
  4.     xmlns:context="http://www.springframework.org/schema/context"  
  5.     xmlns:mvc="http://www.springframework.org/schema/mvc"  
  6.     xsi:schemaLocation="   
  7.            http://www.springframework.org/schema/beans   
  8.            http://www.springframework.org/schema/beans/spring-beans-3.0.xsd   
  9.            http://www.springframework.org/schema/context   
  10.            http://www.springframework.org/schema/context/spring-context-3.0.xsd  
  11.            http://www.springframework.org/schema/mvc   
  12.            http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd" default-autowire="byName">  
  13.                                         <!-- default-autowire="byName",约定优于配置,约定优于配置 -->  
  14.       
  15.     <!-- 配置静态资源,直接映射到对应的文件夹,不被DispatcherServlet处理,3.04新增功能,需要重新设置spring-mvc-3.0.xsd -->  
  16.     <mvc:resources mapping="/img/**" location="/img/"/>  
  17.     <mvc:resources mapping="/js/**" location="/js/"/>  
  18.     <mvc:resources mapping="/css/**" location="/css/"/>  
  19.     <mvc:resources mapping="/html/**" location="/html/"/>  
  20.   
  21.     <!--  
  22.     ①:对web包中的所有类进行扫描,以完成Bean创建和自动依赖注入的功能  
  23.     -->  
  24.     <context:component-scan base-package="com.fsj.spring.web" />  
  25.   
  26.     <!--  
  27.     ②:启动Spring MVC的注解功能,完成请求和注解POJO的映射,添加拦截器,类级别的处理器映射  
  28.     -->  
  29.     <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">  
  30.         <property name="interceptors">  
  31.             <list>  
  32.                 <bean class="com.fsj.spring.util.MyHandlerInterceptor"/>  
  33.             </list>  
  34.         </property>  
  35.     </bean>  
  36.       
  37.     <!--   
  38.     ②:启动Spring MVC的注解功能,完成请求和注解POJO的映射,  
  39.     配置一个基于注解的定制的WebBindingInitializer,解决日期转换问题,方法级别的处理器映射  
  40.     -->  
  41.     <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
  42.         <property name="cacheSeconds" value="0" />  
  43.         <property name="webBindingInitializer">  
  44.             <bean class="com.fsj.spring.util.MyWebBinding" />  
  45.         </property>  
  46.         <span style="color: #0000ff;"><!-- 配置一下对json数据的转换 -->  
  47.         <property name="messageConverters">  
  48.             <list>  
  49.                 <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>  
  50.             </list>  
  51.         </property></span>  
  52.   
  53.   
  54.     </bean>  
  55.       
  56.     <!--   
  57.     ③:对模型视图名称的解析,即在模型视图名称添加前后缀  
  58.     InternalResourceViewResolver默认的就是JstlView所以这里就不用配置viewClass了   
  59.     -->  
  60.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
  61.         <property name="prefix" value="/WEB-INF/view/"></property>  
  62.         <property name="suffix" value=".jsp"></property>  
  63.     </bean>  
  64.       
  65. </beans>   

 主页面用了easyui-layout,简单分为了上、左、中三部分,左边的菜单用的easyui-accordion,中间的主页面没有用iframe,就是一个普通的div就可以完成之前要用的iframe的功能哦,还是帖出来吧:

Html代码   收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ include file="/taglibs.jsp" %>  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>spring3</title>  
  7.     <meta http-equiv="pragma" content="no-cache">  
  8.     <meta http-equiv="cache-control" content="no-cache">  
  9.     <meta http-equiv="expires" content="0">      
  10.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  11.     <meta http-equiv="description" content="This is my page">  
  12.     <script type="text/javascript">  
  13.         jQuery.ajaxSetup({cache:false});//ajax不缓存  
  14.         jQuery(function($){  
  15.               
  16.         });  
  17.           
  18.         function setmain(title,href){  
  19.             $(".combo-panel").parent(".panel").remove(); //<span style="color: #0000ff;">清楚所有class为combo-panel的class为panel的父元素,解决combobox在页面缓存的问题</span>  
  20.   
  21.   
  22.             var centerURL = href;  
  23.             var centerTitle = title;  
  24.             $('body').layout('panel','center').panel({  
  25.                 title:"所在位置:"+centerTitle,  
  26.                 href:centerURL  
  27.             });  
  28.             $('body').layout('panel','center').panel('refresh');  
  29.             return false;         
  30.         }  
  31.           
  32.         //弹出窗口  
  33.         function showWindow(options){  
  34.             jQuery("#MyPopWindow").window(options);  
  35.         }  
  36.         //关闭弹出窗口  
  37.         function closeWindow(){  
  38.             $("#MyPopWindow").window('close');  
  39.         }  
  40.     </script>   
  41.   </head>  
  42.   <!-- easyui-layout 可分上下左右中五部分,中间的是必须的,支持href,这样就可以不用iframe了 -->  
  43.   <body class="easyui-layout" id="mainBody">  
  44.         <!-- 上 -->  
  45.         <div region="north" split="false" style="height:100px;text-align: center;" border="false">  
  46.             <h1>欢迎: ${userSessionInfo.name}</h1>  
  47.         </div>  
  48.           
  49.         <!-- 左-->  
  50.         <div region="west" class="menudiv" split="true" title="系统菜单" style="width:200px;overflow:hidden;">  
  51.             <div id="menuDiv" class="easyui-accordion" fit="false" border="false" animate="false">  
  52.                 <div title="用户管理" style="overflow:hidden;">  
  53.                     <ul>                    
  54.                         <li id="rightLi${child.id}" style="cursor: pointer;"   
  55.                             onclick="setmain('用户管理','${ctx}/user/list')" >用户管理</li>  
  56.                     </ul>   
  57.                     <ul>                    
  58.                         <li id="rightLi${child.id}" style="cursor: pointer;"   
  59.                             onclick="setmain('用户管理','${ctx}/user/list')" >用户管理</li>  
  60.                     </ul>   
  61.                     <ul>                    
  62.                         <li id="rightLi${child.id}" style="cursor: pointer;"   
  63.                             onclick="setmain('用户管理','${ctx}/user/list')" >用户管理</li>  
  64.                     </ul>                       
  65.                 </div>  
  66.                 <div title="部门管理" style="overflow:hidden;">  
  67.                     <ul>                    
  68.                         <li id="rightLi${child.id}">部门管理</li>  
  69.                         <li id="rightLi${child.id}">部门管理</li>     
  70.                     </ul>                   
  71.                 </div>  
  72.                 <div title="XXX管理" style="overflow:hidden;">  
  73.                     <ul>                    
  74.                         <li id="rightLi${child.id}">XXX管理</li>  
  75.                         <li id="rightLi${child.id}">XXX管理</li>    
  76.                     </ul>                   
  77.                 </div>  
  78.                 <div title="XXX管理" style="overflow:hidden;">  
  79.                     <ul>                    
  80.                         <li id="rightLi${child.id}">XXX管理</li>  
  81.                         <li id="rightLi${child.id}">XXX管理</li>  
  82.                         <li id="rightLi${child.id}">XXX管理</li>    
  83.                     </ul>                   
  84.                 </div>  
  85.             </div>  
  86.         </div>  
  87.           
  88.         <!-- 中 -->  
  89.         <div region="center" class="maindiv" title="所在位置: 首页" style="overflow-x:hidden;padding: 0px;" <span style="color: #ff0000;">href="${ctx}/html/welcome.html"</span>  
  90.   
  91.  ></div>  
  92.         <div id="MyPopWindow" modal="true" shadow="false" minimizable="false" cache="false" maximizable="false" collapsible="false" resizable="false" style="margin: 0px;padding: 0px;overflow: auto;"></div>  
  93.   </body>  
  94. </html>  

  这样点击用户管理就可以在center层中打开用户列表了,个人感觉效果还不错,比jQuery UI要漂亮一些,用着也很方便。

中间主页面的代码也很简单,用到了jQeury easyUI的datagrid、combogrid等,用法很简单,关键就是json数据,另外还用到了最好用的日期控件My97DatePicker:

Html代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <html>  
  3.   <head>  
  4.     <script type="text/javascript">  
  5.     jQuery(function($){  
  6.         $('#userTable').datagrid({  
  7.             title:'用户列表', //标题  
  8.             method:'post',  
  9.             iconCls:'icon-edit', //图标  
  10.             singleSelect:false, //多选  
  11.             height:360, //高度  
  12.             fitColumns: true, //自动调整各列,用了这个属性,下面各列的宽度值就只是一个比例。  
  13.             striped: true, //奇偶行颜色不同  
  14.             collapsible:true,//可折叠  
  15.             url:"user/queryList", //数据来源  
  16.             sortName: 'user.id', //排序的列  
  17.             sortOrder: 'desc', //倒序  
  18.             remoteSort: true, //服务器端排序  
  19.             idField:'uid', //主键字段  
  20.             queryParams:{}, //查询条件  
  21.             pagination:true, //显示分页  
  22.             rownumbers:true, //显示行号  
  23.             columns:[[  
  24.                 {field:'ck',checkbox:true,width:2}, //显示复选框  
  25.                 {field:'user.name',title:'名字',width:20,sortable:true,  
  26.                     formatter:function(value,row,index){return row.user.name;} //需要formatter一下才能显示正确的数据  
  27.                 },  
  28.                 {field:'user.age',title:'年龄',width:20,sortable:true,  
  29.                     formatter:function(value,row,index){return row.user.age;}  
  30.                 },  
  31.                 {field:'user.birthday',title:'生日',width:30,sortable:true,  
  32.                     formatter:function(value,row,index){return row.user.birthday;}  
  33.                 },  
  34.                 {field:'user.deptId',title:'部门',width:30,sortable:true,  
  35.                     formatter:function(value,row,index){  
  36.                         return row.deptName;  //该列的值是deptId,显示的是deptName  
  37.                     }  
  38.                 }  
  39.             ]],  
  40.             toolbar:[{  
  41.                 text:'新增',  
  42.                 iconCls:'icon-add',  
  43.                 handler:function(){  
  44.                     addrow();  
  45.                 }  
  46.             },'-',{  
  47.                 text:'更新',  
  48.                 iconCls:'icon-edit',  
  49.                 handler:function(){  
  50.                     updaterow();  
  51.                 }  
  52.             },'-',{  
  53.                 text:'删除',  
  54.                 iconCls:'icon-remove',  
  55.                 handler:function(){  
  56.                     deleterow();  
  57.                 }  
  58.             },'-'],  
  59.             onLoadSuccess:function(){  
  60.                 $('#userTable').datagrid('clearSelections'); //一定要加上这一句,要不然datagrid会记住之前的选择状态,删除时会出问题  
  61.             }  
  62.         });  
  63.           
  64.         //<span style="color: #0000ff;">下拉表格初始化,这个东西在ajax下要尽量少用,太变态了,每加载一次就会重新创建一次,隐藏在页面上,</span>  
  65.   
  66.   
  67.         //<span style="color: #0000ff;">时间一长效率很低,用firebug一看页面上有几十个同样的层保存着下拉框中的内容,只有整个页面全部刷新才清除。</span>  
  68.   
  69.   
  70.         //不知道新版本修正了没有,我目前的做法是点击菜单的时候手动清除一下。  
  71.         $('#deptCombo').combogrid({  
  72.             idField:'id', //ID字段  
  73.             textField:'name', //显示的字段  
  74.             url:"dept/queryAll",  
  75.             fitColumns: true,  
  76.             striped: true,  
  77.             editable:false,//不可编辑,只能选择  
  78.             columns:[[  
  79.                 {field:'code',title:'编号',width:100},  
  80.                 {field:'name',title:'名称',width:150}  
  81.             ]]  
  82.         });  
  83.   
  84.     });  
  85.     //新增  
  86.     function addrow(){  
  87.         showWindow({  
  88.             title:'增加用户信息',  
  89.             href:'user/popWindow',  
  90.             width:300,  
  91.             height:250,  
  92.             onLoad: function(){  
  93.                 $('#userForm').form('clear');  
  94.             }  
  95.               
  96.         });  
  97.     }  
  98.   //更新  
  99.     function updaterow(){  
  100.         var rows = $('#userTable').datagrid('getSelections');  
  101.         //<span style="color: #ff0000;">这里有一个jquery easyui datagrid的一个小bug,必须把主键单独列出来,要不然不能多选</span>  
  102.   
  103.   
  104.         if(rows.length==0){  
  105.             $.messager.alert('提示',"请选择你要更新的用户",'info');  
  106.             return;  
  107.         }  
  108.         if(rows.length > 1){  
  109.             $.messager.alert('提示',"只能选择一位用户进行更新",'info');  
  110.             return;  
  111.         }  
  112.         showWindow({  
  113.             title:'更新用户信息',  
  114.             href:'user/popWindow',  
  115.             width:300,  
  116.             height:250,  
  117.             onLoad: function(){  
  118.             //<span style="color: #ff0000;">自动将数据填充到表单中,无需再查询数据库</span>  
  119.   
  120. ,这里需要注意:  
  121.             //<span style="color: #ff0000;">如果用的是struts2,它的表单元素的名称都是user.id这样的,那load的时候不能加.user要.form('load', rows[0]);</span>  
  122.   
  123.   
  124.             //而spring mvc中表单元素的名称不带对象前缀,直拉就是id,所以这里load的时候是:.<span style="color: #ff0000;">form('load', rows[0].user)</span>  
  125.   
  126.   
  127.                 $("#userForm").form('load', rows[0].user);  
  128.             }  
  129.         });  
  130.     }  
  131.       
  132.   //删除  
  133.     function deleterow(){  
  134.         $.messager.confirm('提示','确定要删除吗?',function(result){  
  135.             if (result){  
  136.                 var rows = $('#userTable').datagrid('getSelections');  
  137.                 var ps = "";  
  138.                 $.each(rows,function(i,n){  
  139.                     if(i==0)   
  140.                         ps += "?uid="+n.uid;  
  141.                     else  
  142.                         ps += "&uid="+n.uid;  
  143.                 });  
  144.                 $.post('user/delete'+ps,function(data){  
  145.                     $('#userTable').datagrid('reload');   
  146.                     $.messager.alert('提示',data.mes,'info');  
  147.                 });  
  148.             }  
  149.         });  
  150.     }  
  151.     //表格查询  
  152.     function searchUser(){  
  153.         var params = $('#userTable').datagrid('options').queryParams; //先取得 datagrid 的查询参数  
  154.         var fields =$('#queryForm').serializeArray(); //自动序列化表单元素为JSON对象  
  155.         $.each( fields, function(i, field){  
  156.             params[field.name] = field.value; //设置查询参数  
  157.         });   
  158.         $('#userTable').datagrid('reload'); //设置好查询参数 reload 一下就可以了  
  159.     }  
  160.     //清空查询条件  
  161.     function clearForm(){  
  162.         $('#queryForm').form('clear');  
  163.         searchUser();  
  164.     }  
  165.       
  166.     </script>   
  167.   </head>  
  168.     
  169.   <body>  
  170.     <form id="queryForm" style="margin:10;text-align: center;">  
  171.         <table width="100%">  
  172.             <tr>  
  173.             <td>名字:<input name="name" style="width: 200"></td>  
  174.             <td>年龄:<input class="easyui-numberspinner" name="age" min="1" max="120" increment="1" style="width:200px;"></input></td>  
  175.             <td align="center"><a href="#" onclick="clearForm();" class="easyui-linkbutton" iconCls="icon-search">清空</a></td>  
  176.             </tr>  
  177.             <tr>  
  178.             <td>生日:<input name="birthday" style="width: 200" class="Wdate" onClick="WdatePicker()"></td>  
  179.             <td>部门:<input id="deptCombo" name="deptId" style="width: 200"></td>  
  180.             <td align="center"><a href="#" onclick="searchUser();" class="easyui-linkbutton" iconCls="icon-search">查询</a></td>  
  181.             </tr>  
  182.         </table>  
  183.     </form>  
  184.     <div style="padding:10" id="tabdiv">  
  185.         <table id="userTable"></table>  
  186.     </div>  
  187.   </body>  
  188. </html>  

 这里不得不说,用spring3 MVC对json的转换直接太方便了,只需要在上面说的spring3-servlet.xml中配置一下就可以,后台只需要@ResponseBody一个注解就OK,可以返回map、list等多种数据类型,spring会自动转换为json对象的,比struts2要方便多了,用struts2要<package name="def" extends="json-default" >,还要用json类型的result:<result name="success" type="json"><param name="root">jsonData</param></result>,还要自己组织jsonData,Controller类如下:

Java代码   收藏代码
  1. @Controller  
  2. @RequestMapping("/user")  
  3. public class UserController {  
  4.   
  5.     @RequestMapping(value="/list",method=RequestMethod.GET)     
  6.     public String list(Model model) throws Exception {  
  7.         model.addAttribute("deptList", deptService.getDeptList());  
  8.         return "user/list";  
  9.     }  
  10.   
  11.     @RequestMapping(value="/queryList",method=RequestMethod.POST)  
  12.     <span style="color: #0000ff;">@ResponseBody     </span>  
  13.   
  14.       
  15.     public Map<String, Object> queryList(DataGridModel dgm,TUser user) throws Exception{  
  16.         //<span style="color: #ff0000;">spring太给力了,可以自动装配两个对象  会自动的装返回的Map转换成JSON对象</span>  
  17.   
  18.   
  19.         //return userService.getPageListByExemple(dgm, user);   
  20.         return userService.getPageList(dgm, user);  
  21.     }  
  22.       
  23.     @RequestMapping(value="/popWindow",method=RequestMethod.GET)  
  24.     public String popWindow() throws Exception{  
  25.         return "user/popWindow";  
  26.     }  
  27.       
  28.     @RequestMapping(value="/addOrUpdate",method=RequestMethod.POST)  
  29.     @ResponseBody  
  30.     public Map<String, String> addOrUpdate(TUser user) throws Exception{  
  31.         //spring会利用jackson自动将返回值封装成JSON对象,比struts2方便了很多  
  32.         Map<String, String> map = new HashMap<String, String>();  
  33.         try {  
  34.             userService.addOrUpdate(user);  
  35.             map.put("mes""操作成功");  
  36.         } catch (Exception e) {  
  37.             e.printStackTrace();  
  38.             map.put("mes""操作失败");  
  39.             throw e;  
  40.         }  
  41.         return map;   
  42.     }  
  43.       
  44.     @RequestMapping(value="/delete",method=RequestMethod.POST)  
  45.     @ResponseBody  
  46.     public Map<String, String> delete(@RequestParam("uid") <span style="color: #ff0000;">List<Integer> uid</span>  
  47.   
  48. )throws Exception{  
  49.         //<span style="color: #ff0000;">spring mvc 还可以将参数绑定为list类型</span>  
  50.   
  51.   
  52.         Map<String, String> map = new HashMap<String, String>();  
  53.         try {  
  54.             userService.deleteUsers(uid);  
  55.             map.put("mes""删除成功");  
  56.         } catch (Exception e) {  
  57.             e.printStackTrace();  
  58.             map.put("mes""删除失败");  
  59.             throw e;  
  60.         }  
  61.         return map;//重定向  
  62.     }  
  63.       
  64.   
  65.     private IDeptService deptService;  
  66.       
  67.     public IDeptService getDeptService() {  
  68.         return deptService;  
  69.     }  
  70.   
  71.     public void setDeptService(IDeptService deptService) {  
  72.         this.deptService = deptService;  
  73.     }  
  74.   
  75.     private IUserService userService;  
  76.       
  77.     public IUserService getUserService() {  
  78.         return userService;  
  79.     }  
  80.   
  81.     public void setUserService(IUserService userService) {  
  82.         this.userService = userService;  
  83.     }  
  84. }  

 怎么样是不是很方便,下面提供了实例项目的下载,实例中没有jar包,jar请依据图中自己添加。

声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
   发表时间:2011-06-12  
jQuery easyUI所需要的JSON格式必须是这样的:
Java代码   收藏代码
  1. {                                                        
  2.     "total":239,                                                        
  3.     "rows":[                                                            
  4.         {"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},           
  5.         {"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},           
  6.         {"code":"003","name":"Name 3","addr":"Address 87","col4":"col4 data"},           
  7.         {"code":"004","name":"Name 4","addr":"Address 63","col4":"col4 data"},           
  8.         {"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"},           
  9.         {"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data"},            
  10.         {"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"},            
  11.         {"code":"008","name":"Name 8","addr":"Address 81","col4":"col4 data"},            
  12.         {"code":"009","name":"Name 9","addr":"Address 69","col4":"col4 data"},            
  13.         {"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"}       
  14.     ]                                                            
  15. }    

所以后台只需返回一个map对象包括total和rows两个key即可:
Java代码   收藏代码
  1. public Map<String, Object> getPageListByExemple(DataGridModel dgm,TUser user) throws Exception{  
  2.         Map<String, Object> result = new HashMap<String, Object>(2);   
  3.         List totalList = getHibernateTemplate().findByExample(user);   
  4.         //这里使用了findByExample,如果没有外键关联(我的hibernate配置文件没有配置主外键对应关系),用这个可以简单很多,  
  5.         List pagelist = getHibernateTemplate().findByExample(user, (dgm.getPage() - 1) * dgm.getRows(), dgm.getRows());  
  6.           
  7.         result.put("total", totalList == null ? 0 : totalList.size());  
  8.         result.put("rows", pagelist);  
  9.         return result;  
  10.     }  
  11.       
  12.       
  13.     public Map<String, Object> getPageList(DataGridModel dgm,TUser user) throws Exception{  
  14.           
  15.         Map<String, Object> result = new HashMap<String, Object>(2);   
  16.         String countQuery = "select count(*) from TUser user,TDept dept where user.deptId=dept.id ";   
  17.         String fullQuery = "select new map(user as user,user.id as uid,dept.name as deptName) from TUser user,TDept dept where user.deptId=dept.id ";   
  18.         //这里需要用new map(),jquery easyui datagrid有一个小bug,必须把idField单独列出来,要不然不能多选  
  19.         String orderString = "";  
  20.         if(StringUtils.isNotBlank(dgm.getSort()))  
  21.             orderString = " order by " + dgm.getSort() + " " + dgm.getOrder(); //排序  
  22.         //增加条件  
  23.         StringBuffer sb = new StringBuffer();  
  24.         Map<String,Object> params = new HashMap<String,Object>();  
  25.           
  26.         if(user != null) {  
  27.             if(StringUtils.isNotBlank(user.getName())) {  
  28.                 sb.append(" and user.name like :userName");  
  29.                 params.put("userName""%"+user.getName()+"%");  
  30.             }  
  31.             if(user.getAge() != null) {  
  32.                 sb.append(" and user.age = :age");  
  33.                 params.put("age", user.getAge());  
  34.             }  
  35.             if(user.getBirthday() != null) {  
  36.                 sb.append(" and user.birthday = :birthday");  
  37.                 params.put("birthday", user.getBirthday());  
  38.             }  
  39.             if(user.getDeptId() != null) {  
  40.                 sb.append(" and dept.id = :deptId");  
  41.                 params.put("deptId", user.getDeptId());  
  42.             }  
  43.         }  
  44.           
  45.         //查询总数可以用getHibernateTemplate(),我下面用的是createQuery  
  46.         //Hibernate的动态条件查询用DetachedCriteria是一个比较好的解决  
  47. //          List totalList = getHibernateTemplate().findByNamedParam(countQuery, params.keySet().toArray(new String[0]), params.values().toArray());  
  48. //          int total = ((Long)totalList.iterator().next()).intValue();  
  49.           
  50.         Query queryTotal = getSession().createQuery(countQuery + sb.toString());  
  51.         Query queryList = getSession().createQuery(fullQuery + sb.toString() + orderString)  
  52.                             .setFirstResult((dgm.getPage() - 1) * dgm.getRows()).setMaxResults(dgm.getRows());  
  53.         if(params!=null && !params.isEmpty()){  
  54.             Iterator<String> it = params.keySet().iterator();  
  55.             while(it.hasNext()){                      
  56.                 String key = it.next();   
  57.                 queryTotal.setParameter(key, params.get(key));  
  58.                 queryList.setParameter(key, params.get(key));  
  59.             }     
  60.         }             
  61.         int total = ((Long)queryTotal.uniqueResult()).intValue(); //这里必须先转成Long再取intValue,不能转成Integer  
  62.           
  63.         List list = queryList.list();  
  64.         result.put("total", total);  
  65.         result.put("rows", list);  
  66.               
  67.         return result;  
  68.     }  
0  已投票
   发表时间:2011-06-12   最后修改:2011-06-12
用jackson转换json时如果有date类型的属性,需要处理一下,可以用配置文件,或者在属性的get方法上用注解: 
Java代码   收藏代码
  1. @JsonSerialize(using = CustomDateSerializer.class)  
  2.     public Date getBirthday() {  
  3.         return this.birthday;  
  4.     }  

CustomDateSerialize类如下: 
Java代码   收藏代码
  1. public class CustomDateSerializer  extends JsonSerializer<Date>{  
  2.     @Override  
  3.     public void serialize(Date value, JsonGenerator jgen, SerializerProvider provider) throws IOException, JsonProcessingException {  
  4.             SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");  
  5.             String formattedDate = formatter.format(value);  
  6.             jgen.writeString(formattedDate);  
  7.     }  
  8. }  
0  已投票
   发表时间:2011-06-13  
看来Jquery EasyUI 和 ExtJs 的用法和显示都有点类似的。
0  已投票
   发表时间:2011-06-13  
我一直觉得这种两层的开发方式很好,一组人专心的做业务,一组人专心的做UI
0  已投票
   发表时间:2011-06-13  
好多代码,太给力了
0  已投票
   发表时间:2011-06-13  
楼主还是比较给力的,要是想办法把jar包一起提供就好了,到网上找哪些jar包也比较麻烦。上次就找了半天,才搞好。我之前一直疑惑,VIEW层数据展示用什么好,JSTL+JSP好像没有富客户端框架EXTJS或JQuery方便,但富客户端框架速度比较慢(现在的项目大量用的EXTJS,速度真的不行,且在不同的浏览器间存在兼容问题,这个问题也很麻烦),我没用过JQuery,看看JQuery怎么样. 
另:上个案例,讲时间类型转换。我看mvc-showcase里以FormBean用注解方式进行数据验证,然后再Control方法里,带上@Valid FormBean form参数进行验证,感觉应该比较方便。这是将前端的数据验证放到服务端处理,用EXTJS或JQuery放在前端验证,是不是会更好。 

FormBean代码片段: 
public class FormBean { 

@NotEmpty 
private String name; 

@Min(21) 
private int age; 

@DateTimeFormat(iso=ISO.DATE) 
@Past 
private Date birthDate; 


Control方法代码片段: 
@RequestMapping(method=RequestMethod.POST) 
public String processSubmit(@Valid FormBean form, BindingResult result, WebRequest webRequest, HttpSession session, Model model) {} 
0  已投票
   发表时间:2011-06-13  
正在学spring,学习了
0  已投票
   发表时间:2011-06-13  
楼主是不是缺少jar包啊?
0  已投票
   发表时间:2011-06-13  
好东西,学习
分享到:
评论
1 楼 liu282713097 2012-06-29  

相关推荐

    spring3 mvc + mybatis + jquery easyui例子

    《构建基于Spring3 MVC、MyBatis和jQuery EasyUI的权限管理系统》 在现代Web开发中,集成多种技术构建高效且功能丰富的应用是常见的实践。本项目实例——"spring3 mvc + mybatis + jquery easyui例子",就是这样一...

    spring mvc+jquery easyui CRUD

    在本项目中,我们主要探讨的是如何利用Spring MVC框架与jQuery EasyUI库来实现一个基本的CRUD(创建、读取、更新、删除)功能。Spring MVC是Java平台上的一个强大的MVC(Model-View-Controller)框架,它提供了一个...

    Springmvc+MyBatis+JQueryEasyUI

    在提供的资源包中,可能包含了一个已经配置好并可以运行的示例项目,包括数据库脚本、Spring MVC的配置文件、MyBatis的Mapper和实体类、以及使用JQueryEasyUI编写的前端页面。这样的例子可以帮助初学者快速理解这三...

    Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统

    在本项目中,"Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统",我们看到一个基于Java技术栈的Web应用开发实例。这个系统利用了多个核心技术来构建一个功能完备的员工管理...

    spring3mvc-jQuery-easyUI做的ajax版本用户管理系统

    【标题】"spring3mvc-jQuery-easyUI做的ajax版本用户管理系统" 提供了一个使用SpringMVC、jQuery和easyUI框架构建的Web应用程序实例,它着重于实现基于Ajax的用户管理功能。这个项目展示了如何将这三个强大的技术...

    Spring+Hibernate+Struts+ajax+jQuery easyUI

    标题 "Spring+Hibernate+Struts+ajax+jQuery easyUI" 提到的是一个经典的Java Web开发技术栈,这个组合被广泛用于构建复杂的企业级应用程序。让我们深入探讨这些技术及其相互作用。 1. **Spring**:Spring 是一个...

    SSH+Jquery easyUI后台管理系统

    SSH+jQuery EasyUI后台管理系统是一种基于Struts2(S)、Spring(S)和Hibernate(H)三大开源框架的Web应用程序开发模式,结合jQuery EasyUI前端框架,构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...

    struts2+spring+mybatis+easyui的实现

    总的来说,"struts2+spring+mybatis+easyui"的实现是一个标准的Java Web项目结构,它利用Maven进行构建管理,通过整合四个组件,实现了后端的业务逻辑处理、数据访问和前端的用户界面展示。这种架构在实际开发中具有...

    Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

    综上所述,这个项目是一个综合性的企业网站演示,利用了Spring.NET、NHibernate、ASP.NET MVC、jQuery 和 easyUI 这些技术栈,展示了如何将开源框架整合在一起,构建一个中英文双语的小型企业网站。通过学习这个项目...

    Spring+SpringMVC+MyBatis+Maven+easyUI整合代码

    Spring+SpringMVC+MyBatis+Maven+EasyUI是一个经典的Java Web开发技术栈,广泛应用于企业级应用系统开发。这个技术组合提供了完整的后端服务处理、前端展示以及项目构建管理的能力。以下是对这些技术及其整合方式的...

    spring3+springMVC+springJDBC+jQuery easyui的登录项目

    该项目是一个基于Spring 3、Spring MVC、Spring JDBC和jQuery EasyUI的登录系统示例,旨在展示如何整合这些技术来构建一个完整的Web应用。下面将详细解释这些技术及其在项目中的作用。 1. **Spring 3**: Spring是...

    spring mvc+mybatis+easyui

    标题 "spring mvc+mybatis+easyui" 暗示了这个项目是基于Spring MVC、MyBatis和EasyUI这三个技术栈构建的Web应用程序。下面将分别介绍这些技术及其结合使用时的关键知识点。 **Spring MVC** Spring MVC是Spring框架...

    spring+spring mvc+mybatis+easyui整合demo

    这个"spring+spring mvc+mybatis+easyui整合demo"项目是针对这些技术的一个集成示例,旨在帮助开发者了解如何将它们协同工作以构建一个功能完备的Web应用程序。 首先,Spring框架作为基础,它提供了依赖注入(DI)...

    Spring+SpringMVC+MyBatis+Maven+EasyUI+Ajax+Json OA项目实例

    EasyUI**:EasyUI是一个基于jQuery的UI框架,提供了丰富的组件和精美的主题,用于快速构建用户界面。在"eyou"OA项目中,EasyUI被用来创建直观、响应式的前端界面,通过Ajax技术和Json实现前后端的数据交换,提高...

    spring mvc mybatis jqueryeasyui

    标题 "spring mvc mybatis jqueryeasyui" 描述了一个基于Java技术栈的Web应用程序开发场景,其中Spring MVC作为控制层框架,MyBatis作为数据访问层框架,jQuery和EasyUI则用于前端交互和界面设计。下面将详细阐述...

    基于SSH + jquery easyui 的一个通讯录Demo

    - **增加(Create)**: 用户填写新联系人的信息,点击“保存”按钮,触发jQuery EasyUI的AJAX请求,将数据发送到Struts2 Action,由Spring托管的服务处理数据的插入操作,完成后返回成功信息。 - **查询(Read)**: ...

    SSH2 + JQuery EasyUI 做的一个对书籍增删改查的例子

    JQuery EasyUI 做的一个对书籍增删改查的例子”表明这是一个使用Struts2(SSH框架的一部分)、Spring和Hibernate(SSH框架的另外两个部分)结合JQuery EasyUI创建的Web应用程序示例,主要用于图书管理系统的CRUD...

    整合spring data jpa + spring mvc + easyui

    标题 "整合spring data jpa + spring mvc + easyui" 暗示了这个项目是关于构建一个基于Java的Web应用程序,使用了Spring框架的重要组件,包括Spring Data JPA、Spring MVC以及EasyUI。让我们详细了解一下这些技术...

    DWR+jquery2.x+easyUI1.3.x开发富客户端应用

    1. **SSH+jQuery+DWR+EasyUI 实战**:本文档通过一系列的实战案例展示了如何将 Struts2、Spring3、Hibernate4 与 DWR、jquery2.x 和 easyUI1.3.x 结合起来开发实际的应用。 2. **实战案例详解**: - SSH 架构集成...

    springmvc+mybatis+jqueryeasyui后台管理模板

    在这里,"springmvc+mybatis+jqueryeasyui后台管理模板"提供了一个完整的后台管理系统的基础结构,包括登录、权限控制、数据展示、数据编辑等功能模块。开发者可以根据自己的需求对这个模板进行定制,添加或修改功能...

Global site tag (gtag.js) - Google Analytics