extreme table

转载自：http://youlong05.iteye.com/blog/37726

1. 一、简介  
2. Extreme Table是最功能强大而又容易配置,扩展,自定义的Table 控件。  
3. 最主要的功能包括排序, 分页, 导出Excel, pdf和汇总  
4.   
5. 官方网站：  
6. http://www.extremecomponents.org  
7. ExtremeTable自带的文档：  
8. http://extremecomponents.org/wiki/index.php/Main_Page  
9. Luck翻译的ExtremeTable官方文档中文版：  
10. http://extremecomponents.org/wiki/index.php/Simplified_Chinese  
11.   
12. 二、简单示例  
13. 1，将extremecomponents.jar丢入WEB-INF/lib  
14. 2，将SpringSide与ec的相关images丢入/resources/images/table  
15. 3，将SpringSide的extremecomponents.css丢入/resources/css  
16. 4，将SpringSide的extremetable.properties丢入classpath,如src-conf/table  
17. 5，extremecomponents.css：  
18. /*ExtremeTable专用Style*/  
19. .eXtremeTable {  
20. margin: 0;  
21. padding: 0;  
22. }  
23.   
24. .eXtremeTable select {  
25. font-family: verdana, arial, helvetica, sans-serif;  
26. font-size: 12px;  
27. border: solid 1px #EEE;  
28. width: 75px;  
29. }  
30.   
31. .eXtremeTable .tableRegion {  
32. border: 1px solid #AAC2D9;  
33. padding: 2px;  
34. font-size: 12px;  
35. margin-top: 7px;  
36. }  
37.   
38. .eXtremeTable .filter {  
39. background-color: #F4F4F4;  
40. }  
41.   
42. .eXtremeTable .title {  
43. color: #1a7cdf;  
44. vertical-align: middle;  
45. font-size: 18px;  
46. font-weight: bold;  
47.   
48. }  
49.   
50. .eXtremeTable .titleRow {  
51. background-color: #F4F4F4;  
52. }  
53.   
54. .eXtremeTable .titleRow td {  
55. border-bottom: 1px solid #308dbb;  
56. padding-top: 2px;  
57. padding-bottom: 2px;  
58. vertical-align: middle;  
59. }  
60.   
61. .eXtremeTable .titleRow span {  
62. color: #444444;  
63. font-weight: bold;  
64. font-size: 12px;  
65. }  
66.   
67. .eXtremeTable .filter input {  
68. font-size: 12px;  
69. width: 100%;  
70. }  
71.   
72. .eXtremeTable .filter select {  
73. font-size: 9px;  
74. border: solid 1px #EEE;  
75. width: 100%;  
76. }  
77.   
78. .eXtremeTable .tableHeader {  
79. background-color: #308dbb;  
80. color: white;  
81. font-size: 12px;  
82. font-weight: bold;  
83. text-align: left;  
84. padding-right: 3px;  
85. padding-left: 3px;  
86. padding-top: 4px;  
87. padding-bottom: 4px;  
88. margin: 0px;  
89. border-right: 1px solid white;  
90. background-image: url( "../images/tableTopbg.gif" );  
91. }  
92.   
93. .eXtremeTable .tableHeaderSort {  
94. background-color: #3a95c2;  
95. color: white;  
96. font-size: 12px;  
97. font-weight: bold;  
98. text-align: left;  
99. padding-right: 3px;  
100. padding-left: 3px;  
101. padding-top: 4px;  
102. padding-bottom: 4px;  
103. white-space: nowrap;  
104. border-right: 1px solid white;  
105. background-image: url( "../images/tableTopbg.gif" );  
106. }  
107.   
108. .eXtremeTable .odd a, .even a {  
109. color: Black;  
110. font-size: 12px;  
111. }  
112.   
113. .eXtremeTable .odd td, .eXtremeTable .even td {  
114. vertical-align: middle;  
115. font-size: 12px;  
116.   
117. padding-right: 3px;  
118. padding-left: 3px;  
119. padding-top: 4px;  
120. padding-bottom: 4px;  
121. border-bottom: 1px solid #CADAE8;  
122. border-right: 1px solid #DAE6EF;  
123. }  
124.   
125. .eXtremeTable .odd {  
126. background-color: #FFFFFF;  
127. }  
128.   
129. .eXtremeTable .even {  
130. background-color: #F8F8F8;  
131. }  
132.   
133. .eXtremeTable .highlight td {  
134. color: black;  
135. font-size: 12px;  
136. vertical-align: middle;  
137. background-color: #fdecae;  
138.   
139. padding-right: 3px;  
140. padding-left: 3px;  
141. padding-top: 4px;  
142. padding-bottom: 4px;  
143. border-bottom: 1px solid #CADAE8;  
144. border-right: 1px solid #DAE6EF;  
145. }  
146.   
147. .eXtremeTable .highlight a, .highlight a {  
148. color: black;  
149. font-size: 12px;  
150. }  
151.   
152. .eXtremeTable .toolbar {  
153. background-color: #FFFFFF;  
154. font-size: 12px;  
155. border-right: 1px solid silver;  
156. border-left: 1px solid silver;  
157. border-top: 1px solid silver;  
158. border-bottom: 1px solid silver;  
159. }  
160.   
161. .eXtremeTable .toolbar td {  
162. color: #444444;  
163. padding: 0px 3px 0px 3px;  
164. text-align: center;  
165. }  
166.   
167. .eXtremeTable .separator {  
168. width: 7px;  
169. }  
170.   
171. .eXtremeTable .statusBar {  
172. background-color: #FFFFFF;  
173. font-size: 12px;  
174. }  
175.   
176. .eXtremeTable .filterButtons {  
177. background-color: #F4F4F4;  
178. text-align: right;  
179. }  
180.   
181. .eXtremeTable .title span {  
182. margin-left: 7px;  
183. }  
184.   
185. .eXtremeTable .formButtons {  
186. display: block;  
187. margin-top: 10px;  
188. margin-left: 5px;  
189. }  
190.   
191. .eXtremeTable .formButton {  
192. cursor: pointer;  
193. font-size: 12px;  
194. font-weight: bold;  
195. background-color: #308dbb;  
196. color: white;  
197. margin-top: 5px;  
198. border: outset 1px #333;  
199. vertical-align: middle;  
200. }  
201.   
202. .eXtremeTable .calcRow {  
203. background-color: #FFFFFF;  
204. }  
205.   
206. .eXtremeTable .calcRow td {  
207. background-color: #FFFFFF;  
208. border-top: 1px solid #cccccc;  
209. border-right: 1px solid #cccccc;  
210. }  
211.   
212. .eXtremeTable .calcTitle {  
213. font-weight: bold;  
214. font-size: 12px;  
215. }  
216.   
217. .eXtremeTable .calcResult {  
218. font-size: 12px;  
219. }  
220. 6，extremetable.properties：  
221. table.filterable=false  
222. table.imagePath=/resources/images/table/*.gif 
223. table.locale=zh_CN 
224. table.view.html=org.extremecomponents.table.view.CompactView 
225.  
226. row.highlightRow=true 
227.  
228. column.format.date=yyyy-MM-dd 
229. column.format.currency=###,###,###,###,#00.00 
230. 7，以listBlog为例： 
231. public void onList(HttpServletRequest request, 
232. HttpServletResponse response, ModelAndView mav) throws Exception { 
233. Limit limit = ExtremeTablePage.getLimit(request, defaultPageSize); 
234. Page page = commonManager.findBy(Blog.class, null, 
235. ExtremeTablePage.getSort(limit), limit.getPage(), 
236. limit.getCurrentRowsDisplayed()); 
237. mav.addObject("blogList", page.getResult()); 
238. mav.addObject("totalRows", page.getTotalCount()); 
239. } 
240. 8，Page和上面介绍pager时的Page类一样 
241. 9，ExtremeTablePage： 
242. package com.itone.hibernate.util; 
243.  
244. import java.util.HashMap; 
245. import java.util.Map; 
246.  
247. import javax.servlet.http.HttpServletRequest; 
248.  
249. import org.extremecomponents.table.context.Context; 
250. import org.extremecomponents.table.context.HttpServletRequestContext; 
251. import org.extremecomponents.table.limit.Limit; 
252. import org.extremecomponents.table.limit.LimitFactory; 
253. import org.extremecomponents.table.limit.Sort; 
254. import org.extremecomponents.table.limit.TableLimit; 
255. import org.extremecomponents.table.limit.TableLimitFactory; 
256.  
257. import com.itone.common.support.Constants; 
258.  
259. /** 
260. * 辅助ExtremeTable获取分页信息的Util类 
261. * 
262. * @author calvin 
263. */  
264. public class ExtremeTablePage {  
265.   
266. static public Limit getLimit(HttpServletRequest request) {  
267. return getLimit(request, Constants.DEFAULT_PAGE_SIZE);  
268. }  
269.   
270. /** 
271. * 从request构造Limit对象实例. 
272. * Limit的构造流程比较不合理，为了照顾export Excel时忽略信息分页，导出全部数据 
273. * 因此流程为程序先获得total count, 再使用total count 构造Limit，再使用 
274. limit中的分页数据查询分页数据 
275. * 而SS的page函数是在同一步的，无法拆分，再考虑到首先获得的totalCount 
276. */  
277. static public Limit getLimit(HttpServletRequest request, int defautPageSize) {  
278. Context context = new HttpServletRequestContext(request);  
279. LimitFactory limitFactory = new TableLimitFactory(context);  
280. TableLimit limit = new TableLimit(limitFactory);  
281. limit.setRowAttributes(1000000000, defautPageSize);  
282. return limit;  
283. }  
284.   
285. /** 
286. * 将Limit中的排序信息转化为Map{columnName,升序/降序} 
287. */  
288. static public Map getSort(Limit limit) {  
289. Map sortMap = new HashMap();  
290. if (limit != null) {  
291. Sort sort = limit.getSort();  
292. if (sort != null && sort.isSorted()) {  
293. sortMap.put(sort.getProperty(), sort.getSortOrder());  
294. }  
295. }  
296. return sortMap;  
297. }  
298. }  
299. 10，commonManager.findBy（args）用到SpringSide的BaseHibernateDao并有扩展：  
300. public Page findBy(Class clazz, Map filterMap, Map orderMap, int pageNo, int  
301. pageSize, CriteriaSetup criteriaSetup) {  
302.   
303. Criteria criteria = null;  
304.   
305. if(clazz == null) {  
306.   
307. criteria = getSession().createCriteria(getEntityClass());  
308.   
309. } else {  
310.   
311. criteria = getSession().createCriteria(clazz);  
312.   
313. }  
314.   
315. if (!CollectionUtils.isEmpty(filterMap)) {  
316. try {  
317. criteriaSetup.setup(criteria, filterMap);  
318. } catch (Exception e) {  
319. }  
320. }  
321.   
322. if (!CollectionUtils.isEmpty(orderMap))  
323. sortCriteria(criteria, orderMap, null);  
324.   
325. criteria.setResultTransformer(CriteriaSpecification.ROOT_ENTITY);  
326.   
327. return pagedQuery(criteria, pageNo, pageSize);  
328. }  
329. 11，listBlog.jsp：  
330. <%@ taglib prefix="ec" uri="http://www.extremecomponents.org%>  
331. <link href="/resources/css/extremecomponents.css" rel="stylesheet"  
332. type="text/css">  
333. <ec:table  
334. var="blog"  
335. items="blogList"  
336. action="/blog.do"  
337. retrieveRowsCallback="limit"  
338. sortRowsCallback="limit"  
339. rowsDisplayed="10">  
340. <ec:row>  
341.   
342. <ec:column property="name" title="博客名称"/>  
343.   
344. <ec:column property="user.name" title="博客作者" alias="userName"/>  
345.   
346. <ec:column property="description" title="描述"/>  
347.   
348. <ec:column property="edit" title="操作" sortable="false" viewsAllowed="html">  
349.   
350. <a href="blog.do?method=edit&id=${blog.id}">  
351.   
352. 编辑  
353.   
354. </a>  
355.   
356. </ec:column>  
357. </ec:row>  
358. </ec:table>  
359. 12，web.xml  
360. <context-param>  
361. <param-name>extremecomponentsPreferencesLocation</param-name>  
362. <param-value>/table/extremetable.properties</param-value>  
363. </context-param>