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

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文件，如下：

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还有声明一下事务处理，这个和之前那一版是一样的，如下：

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类型的数据，如下：

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的功能哦，还是帖出来吧：

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：

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类如下：

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请依据图中自己添加。

• spring3.zip?(549.8 KB)
• 下载次数: 4848
  • 查看图片附件声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。推荐链接
    • 想进外企，出国，跳槽，找工作？英语不好,快来充电吧
    • Java讲师与Android讲师通缉令--悬赏2000元！返回顶楼?????
      • 太阳神喻
      • 等级:?
      • 
      • 性别:?
      • 文章: 47
      • 积分: 150
      • 来自: 武汉
      • ?? 发表时间：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?0?已投票
        • 太阳神喻
        • 等级:?
        • 
        • 性别:?
        • 文章: 47
        • 积分: 150
        • 来自: 武汉
        • ?? 发表时间：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?1?已投票
          • paulxiang
          • 等级: 初级会员
          • 
          • 性别:?
          • 文章: 18
          • 积分: 30
          • 来自: 杭州
          • ?? 发表时间：2011-06-13??引用?收藏看来Jquery EasyUI 和 ExtJs 的用法和显示都有点类似的。返回顶楼?????回帖地址0?0?已投票
            • phlsbg
            • 等级: 初级会员
            • 
            • 性别:?
            • 文章: 112
            • 积分: 0
            • 来自: 北京
            • ?? 发表时间：2011-06-13??引用?收藏我一直觉得这种两层的开发方式很好，一组人专心的做业务，一组人专心的做UI返回顶楼?????回帖地址0?0?已投票
              • KimHo
              • 等级: 初级会员
              • 
              • 性别:?
              • 文章: 345
              • 积分: 60
              • 来自: 珠海
              • ?? 发表时间：2011-06-13??引用?收藏好多代码，太给力了返回顶楼?????回帖地址0?0?已投票
                • daifeng130
                • 等级: 初级会员
                • 
                • 性别:?
                • 文章: 28
                • 积分: 30
                • 来自: 武汉
                • ?? 发表时间：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?0?已投票
                  • PineSeed
                  • 等级: 初级会员
                  • 
                  • 性别:?
                  • 文章: 13
                  • 积分: 40
                  • 来自: 广州
                  • ?? 发表时间：2011-06-13??引用?收藏正在学spring，学习了返回顶楼?????回帖地址0?0?已投票
                    • xuriyunhai
                    • 等级: 初级会员
                    • 
                    • 性别:?
                    • 文章: 9
                    • 积分: 40
                    • 来自: 上海
                    • ?? 发表时间：2011-06-13??引用?收藏楼主是不是缺少jar包啊?返回顶楼?????回帖地址0?0?已投票
                      • evanzzy
                      • 等级: 初级会员
                      • 
                      • 性别:?
                      • 文章: 106
                      • 积分: 40
                      • 来自: 北京
                      • ?? 发表时间：2011-06-13??引用?收藏好东西，学习