EC tags

  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>  
posted @ 2009-07-30 18:20  QQ天堂  阅读(768)  评论(0)  编辑  收藏  举报