ecside介紹

ecside是一個開源的列表組件。
他源自著名開源列表組件 eXtremeComponents （http://www.extremecomponents.org），
但現(xiàn)在已經(jīng)脫離eXtremeComponents,獨立發(fā)展（仍有大量代碼來自 eXtremeComponents）。
“做最實用易用的列表組件”是ecside最終的目標。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、昭陽網(wǎng)站維護、網(wǎng)站推廣。

作者： fins ( name: Wei Zijun    email:fins@163.com   blog:http://fins.javaeye.com )

在使用前，請閱讀一下以下信息，以幫助您了解您要使用的將是一個多么不成熟的東西(但它會有成熟的一天，而且那天不會遠 呵呵)：
1 ecside不能和原始版本的 eXtremeComponents 同時使用，且不保證能與原先使用 eXtremeComponents 的系統(tǒng)兼容，請見諒。
2 目前只支持GBK編碼的應(yīng)用，請見諒。
3 目前只在IE6 和FireFox2 上進行過測試，不保證兼容其他(版本)瀏覽器，請見諒。
4 目前提供的樣式風格巨丑無比，請見諒。
5 目前沒有完備的文檔和例子，請見諒。
6 代碼沒有注釋，沒有測試用例，請見諒。
7 沒有很好的版本控制，沒有構(gòu)建腳本，請見諒。
8 擁有無數(shù)未知的bug，請見諒。

ecside發(fā)布地址：
http://fins.javaeye.com/blog/40190

ecside圈子:
http://ecside.javaeye.com/

ecside綜合討論專用帖
http://fins.javaeye.com/blog/48723

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
主要增強的功能：
1 可設(shè)置工具條位置（上 下 或 不顯示）
2 可設(shè)置工具條內(nèi)容（顯示哪些 不顯示哪些）
3 可設(shè)置工具條上各個功能按鈕的相對位置
4 增加了調(diào)整頁大小的選擇框，并可自定義選擇框內(nèi)的內(nèi)容
5 增加了帶有鄰近頁面的導航條
6 增加了可跳轉(zhuǎn)到指定頁面的跳轉(zhuǎn)框
7 增加了當前選中行高亮
8 為ec:table 增加了 excludeParameters 和 includeParameters 屬性，可以實現(xiàn)更快捷簡便的“參數(shù)保留/不保留”功能
9 可添加自定義的html代碼到工具條內(nèi) 或其他位置
10 可手動調(diào)整列寬
11 增加了“列表內(nèi)部滾動條”(實現(xiàn)列表頭固定，列表體滾動的功能)
12 為ec:row和ec:column 添加更多的html事件支持，現(xiàn)支持： onclick ondbclick
13 為ec:table ec:row ec:column增加了自定義擴展屬×××
14 增加 ec:extendrow 標簽，實現(xiàn)列表擴展行的功能
15 增加shadowRow(影子行)功能：每行下面可以再加一個子行 這個行里顯示什么可以由大家自己定義
16 增加頁面變量 ${TOTALROWCOUNT}用來標示當前紀錄在全部記錄中的行數(shù)
17 增加了打印功能（尚不完善）
18 ec:column屬性增加 ellipsis ,實現(xiàn)單元格內(nèi)數(shù)據(jù)過長的時候 自動截短并加"..."的功能(ie only)
19 實現(xiàn)了跨列的列表頭
20 統(tǒng)計欄的標題格可跨列
21 增加了若干種cell 和 headerCell,例如checkbox radio
22 取消了p_w_picpathPath屬性,樣式相關(guān)的圖片信息全部提入css內(nèi)
23 重（第4聲）用了js 和css ，很多功能用js來實現(xiàn)
24 支持了ajax翻頁
25 支持預查詢功能，在察看第n頁的時候，把n+1頁的數(shù)據(jù)也查詢出來（隱藏著）備用，加快查看下一頁的速度
26 將導出excel所使用的組件由poi切換成了 jxl
27 xls導出方式修改 原始的導出是導出的vo/map里的原始數(shù)值 現(xiàn)在是導出頁面實際顯示的內(nèi)容
28 增加簡捷導出方式(通過ec:table的 xlsFileName pdfFileName csvFileName屬性)
29 支持pdf中文導出。
30 代碼進行了大規(guī)模的重構(gòu)
31 增加了很多ajax相關(guān)特性
32 實現(xiàn)了可編輯列表功能 以及cell的映射功能

... ...

上文中對EcSide組件的介紹是我轉(zhuǎn)載自作者其中一篇博文中的內(nèi)容, 去年開發(fā)J2EE項目中需要一個Grid組件, 它能夠支持分頁, 排序, 過濾, 同時能夠?qū)С龀蒃xcel, PDF文檔, 而這個EcSide組件正好是滿足自己所需的一個最合適的組件. 現(xiàn)在這個組件作者已經(jīng)更名成GT-Grid了,  功能各方面也作了一些調(diào)整, 大家可以訪問作者fins的博客以獲取更多最新消息. 其相關(guān)一些資料, 可以訪問http://ecside.group.javaeye.com/group/share, 有各版本的EcSide組件, 以及相關(guān)使用文檔與demo程序供下載. 下面我簡單介紹這個組件在JSP開發(fā)中的使用情況. 去下載作者提供的ECSide文檔.rar, 結(jié)合來進行學習會比較方便不少, 可以依次看看ECSide入門, ECSide標簽屬性說明, ECSide基于數(shù)據(jù)庫的分頁、排序、過濾, ECSide_FAQ等文章.

ECSide是有一個基于jsp tag的開源列表組件.
簡單的說,它就是一組可以幫助你快速實現(xiàn)強大的列表的jsp標簽.
它的工作原理很簡單.
您將要展現(xiàn)的列表的數(shù)據(jù)集合(Collection),放入request/pagecontext/session內(nèi)(使用setAttribute方法.這個工作可以在action/servlet里完成,也可以在jsp頁面內(nèi)完成),然后頁面跳轉(zhuǎn)到使用ECSide標簽的jsp頁面,此時ECSide就可以幫助您展現(xiàn)出所需要的列表.

一個簡單的流程通常是這樣的.

1 客戶端請求action/servlet(如 http://10.195.129.101/test/userlist.do)
2 action接受到請求后,調(diào)用相應(yīng)的BO/dao,執(zhí)行取列表數(shù)據(jù)的方法.
3 取得數(shù)據(jù)后(通常是一個vo/map的list),將數(shù)據(jù)放入request內(nèi)(使用requset.setAttribute(key,value)方法.)
4 將請求forward到使用ECSide標簽的jsp頁面.
5 ECSide將展現(xiàn)出列表.

下面我將自己使用ecside_2.0_RC1步驟簡單介紹一下

首先,需要去下載準備好ecside_2.0_RC1.rar, 如果需要支持導出PDF, 還要需要一些額外的jar包, 下載dependencies_common.zip, dependencies_font.rar, dependencies_pdf.zip, 把解壓出來得到的這些jar文件如ecside_2.0_RC1.jar, 都放到項目的WebRoot\WEB-INF\lib文件夾下, ecside.tld文件放到WEB-INF文件夾下, 然后在web.xml中添加組件導出功能所需的一個filter名稱ecsideExport, 在JSP頁面頭部引入控件所需的js, css文件.

[javascript]view plaincopy

  1. <%@ taglib uri="http://www.ecside.org" prefix="ec" %>  

  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  

  4. <link rel="stylesheet" type="text/css" href="Admin/ecside/css/ecside_style.css">  

  5. <script type="text/javascript" src="Admin/ecside/js/prototype_mini.js"></script>  

  6. <script type="text/javascript" src="Admin/ecside/js/ecside_msg_utf8_cn.js"></script>  

  7. <script type="text/javascript" src="Admin/ecside/js/ecside.js"></script>  

其次,構(gòu)建所需的ec:table, 比如一個日志查詢模塊的表格如下, 至于每一個EcSide組件tag屬性意思可以查看幫助使用文檔

[html]view plaincopy

  1. <center>

  2. <brstyle="line-height:8px;"/>

  3. <ec:tableitems="all"var="record"

  4. retrieveRowsCallback="limit"

  5. rowsDisplayed="20"showPrint="true"showTitle="true"

  6. sortRowsCallback="limit"filterRowsCallback="limit"

  7. action="LogServlet?status=selectall"useAjax="true"

  8. pageSizeList="10,20,30,50,100"title="系統(tǒng)日志"showTitle="false"

  9. xlsFileName="系統(tǒng)日志.xls"csvFileName="系統(tǒng)日志.csv"pdfFileName="系統(tǒng)日志.pdf"

  10. sortable="true"filterable="true"resizeColWidth="true">

  11. <ec:rowrecordKey="${record.id}">

  12. <ec:columnwidth="60"property="id"title="序號"sortable="false"filterable="false"style="text-align:center"></ec:column>

  13. <ec:columnwidth="120"property="clientIP"title="客戶端IP地址”></ec:column>

  14. <ec:columnwidth="90"property="userName"title="用戶”></ec:column>

  15. <ec:columnwidth="150"property="logTime"title="時間”></ec:column>

  16. <ec:columnwidth="100"property="dvrName"title="設(shè)備名稱” sortable="false" filterable="false"></ec:column>

  17. <ec:columnwidth="90"property="logTypeName"title="日志類別”></ec:column>

  18. <ec:columnwidth="130"property="descript"title="事件描述”></ec:column>

  19. <ec:columnwidth="250"property="comment"title="備注” sortable="false" filterable="false" ellipsis="true"></ec:column>

  20. </ec:row>

  21. </ec:table>

  22. </center>


<!-- 編輯和過濾所使用的 通用的文本框模板 -->
[html]view plaincopy

  1. <textareaid="ecs_t_date"rows=""cols=""style="display:none">

  2. <inputtype="text"class="inputtext"value=""

  3. style="width:100%;"name=""/>

  4. <inputclass="calendarImgButton"onclick="ECSideUtil.showCalendar(this) type="button" id="date_button"/>

  5. </textarea>

  7. <textareaid="ecs_t_input"rows=""cols=""style="display:none">

  8. <inputtype="text"class="inputtext"value=""onblur="ECSideUtil.updateEditCell(this)"

  9. style="width:100%;"name=""/>

  10. </textarea>

一般我們還會帶查詢功能, 該組件支持AJAX方式的查詢, 使用ECSideUtil.queryECForm, 其中l(wèi)istFormName為組件Name, 默認為ec

[javascript]view plaincopy

  1. <script type="text/javascript">  

  2. //====================== 查詢 相關(guān) ======================== //

  3. function doQueryOper(queryFormName, listFormName)  

  4. {  

  5. var queryForm=$(queryFormName);  

  7. var queryPara={  

  8. "txtLogType" : queryForm["txtLogType"].value,  

  9. "userName" : queryForm["txtUserName"].value,  

  10. "dt1" : queryForm["dt1"].value,  

  11. "dt2" : queryForm["dt2"].value  

  12. };  

  13. ECSideUtil.queryECForm(listFormName,queryPara,true);  

  14. }  

  15. </script>  

最后,就是由后臺相關(guān)的Servlet或Action提供組件所需數(shù)據(jù), 供Grid呈現(xiàn), 在<ec:table>中action指定提供數(shù)據(jù)的url, 如action="LogServlet?status=selectall",

對于大數(shù)據(jù)量的項目最好寫個存儲過程支持對數(shù)據(jù)的分頁顯示. 后臺大致代碼如下, 如在Servlet的doPost方法中處理

[java]view plaincopy

  1. publicvoid doPost(HttpServletRequest request, HttpServletResponse response)  

  2. throws ServletException, IOException {  

  4. String path="Admin/error.htm";  

  5. String status = request.getParameter("status");  

  6. if(status !=null)  

  7. {  

  8. if("selectall".equals(status) && DAOFactory.CheckUser(request))  

  9. {  

  10. List all = null;  

  11. int currentPage =1;  

  12. int size =50;  

  13. int allRecords =0;  

  14. LogDAO logdao = DAOFactory.getLogDAOInstance();  

  15. Limit limit = RequestUtils.getLimit(request);  

  16. Sort sort = limit.getSort();  

  17. Map sortValueMap = sort.getSortValueMap();  

  18. FilterSet filterSet = limit.getFilterSet();  

  19. Map filterPropertyMap = filterSet.getPropertyValueMap();  

  20. QueryItem queryCondition = new QueryItem();  

  21. queryCondition.setType(request.getParameter("txtLogType"));  

  22. queryCondition.setBeginDate(request.getParameter("dt1"));  

  23. queryCondition.setEndDate(request.getParameter("dt2"));  

  25. try

  26. {  

  27. allRecords = logdao.getAllCount(sortValueMap, filterPropertyMap, queryCondition);  

  28. int[] rowStartEnd=RequestUtils.getRowStartEnd(request, allRecords, size);  

  29. if(size > allRecords)  

  30. {  

  31. currentPage = 1;  

  32. }  

  33. else

  34. {  

  35. currentPage = limit.getPage();  

  36. }  

  37. all = logdao.findAll(rowStartEnd[1] - rowStartEnd[0], currentPage, sortValueMap, filterPropertyMap, queryCondition);  

  38. }  

  39. catch(Exception ex)  

  40. {  

  42. }  

  43. request.setAttribute("all", all);  

  44. path="Admin/systemLog.jsp";  

  45. }  

  46. }  

  48. // 根據(jù)path路徑進行跳轉(zhuǎn)

  50. request.getRequestDispatcher(path).forward(request, response);  

  51. }  


網(wǎng)頁名稱：ecside介紹
網(wǎng)站鏈接：http://www.muchs.cn/article36/ijcpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站制作、全網(wǎng)營銷推廣、域名注冊、ChatGPT、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)