ecside是一個開源的列表組件。
他源自著名開源列表組件 eXtremeComponents (http://www.extremecomponents.org),
但現(xiàn)在已經(jīng)脫離eXtremeComponents,獨(dú)立發(fā)展(仍有大量代碼來自 eXtremeComponents)。
“做最實用易用的列表組件”是ecside最終的目標(biāo)。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名注冊、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、昭陽網(wǎng)站維護(hù)、網(wǎng)站推廣。
作者: fins ( name: Wei Zijun email:fins@163.com blog:http://fins.javaeye.com )
在使用前,請閱讀一下以下信息,以幫助您了解您要使用的將是一個多么不成熟的東西(但它會有成熟的一天,而且那天不會遠(yuǎn) 呵呵):
1 ecside不能和原始版本的 eXtremeComponents 同時使用,且不保證能與原先使用 eXtremeComponents 的系統(tǒng)兼容,請見諒。
2 目前只支持GBK編碼的應(yīng)用,請見諒。
3 目前只在IE6 和FireFox2 上進(jìn)行過測試,不保證兼容其他(版本)瀏覽器,請見諒。
4 目前提供的樣式風(fēng)格巨丑無比,請見諒。
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
主要增強(qiáng)的功能:
1 可設(shè)置工具條位置(上 下 或 不顯示)
2 可設(shè)置工具條內(nèi)容(顯示哪些 不顯示哪些)
3 可設(shè)置工具條上各個功能按鈕的相對位置
4 增加了調(diào)整頁大小的選擇框,并可自定義選擇框內(nèi)的內(nèi)容
5 增加了帶有鄰近頁面的導(dǎo)航條
6 增加了可跳轉(zhuǎn)到指定頁面的跳轉(zhuǎn)框
7 增加了當(dāng)前選中行高亮
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增加了自定義擴(kuò)展屬×××
14 增加 ec:extendrow 標(biāo)簽,實現(xiàn)列表擴(kuò)展行的功能
15 增加shadowRow(影子行)功能:每行下面可以再加一個子行 這個行里顯示什么可以由大家自己定義
16 增加頁面變量 ${TOTALROWCOUNT}用來標(biāo)示當(dāng)前紀(jì)錄在全部記錄中的行數(shù)
17 增加了打印功能(尚不完善)
18 ec:column屬性增加 ellipsis ,實現(xiàn)單元格內(nèi)數(shù)據(jù)過長的時候 自動截短并加"..."的功能(ie only)
19 實現(xiàn)了跨列的列表頭
20 統(tǒng)計欄的標(biāo)題格可跨列
21 增加了若干種cell 和 headerCell,例如checkbox radio
22 取消了p_w_picpathPath屬性,樣式相關(guān)的圖片信息全部提入css內(nèi)
23 重(第4聲)用了js 和css ,很多功能用js來實現(xiàn)
24 支持了ajax翻頁
25 支持預(yù)查詢功能,在察看第n頁的時候,把n+1頁的數(shù)據(jù)也查詢出來(隱藏著)備用,加快查看下一頁的速度
26 將導(dǎo)出excel所使用的組件由poi切換成了 jxl
27 xls導(dǎo)出方式修改 原始的導(dǎo)出是導(dǎo)出的vo/map里的原始數(shù)值 現(xiàn)在是導(dǎo)出頁面實際顯示的內(nèi)容
28 增加簡捷導(dǎo)出方式(通過ec:table的 xlsFileName pdfFileName csvFileName屬性)
29 支持pdf中文導(dǎo)出。
30 代碼進(jìn)行了大規(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é)合來進(jìn)行學(xué)習(xí)會比較方便不少, 可以依次看看ECSide入門, ECSide標(biāo)簽屬性說明, ECSide基于數(shù)據(jù)庫的分頁、排序、過濾, ECSide_FAQ等文章.
ECSide是有一個基于jsp tag的開源列表組件.
簡單的說,它就是一組可以幫助你快速實現(xiàn)強(qiáng)大的列表的jsp標(biāo)簽.
它的工作原理很簡單.
您將要展現(xiàn)的列表的數(shù)據(jù)集合(Collection),放入request/pagecontext/session內(nèi)(使用setAttribute方法.這個工作可以在action/servlet里完成,也可以在jsp頁面內(nèi)完成),然后頁面跳轉(zhuǎn)到使用ECSide標(biāo)簽的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標(biāo)簽的jsp頁面.
5 ECSide將展現(xiàn)出列表.
下面我將自己使用ecside_2.0_RC1步驟簡單介紹一下
首先,需要去下載準(zhǔn)備好ecside_2.0_RC1.rar, 如果需要支持導(dǎo)出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中添加組件導(dǎo)出功能所需的一個filter名稱ecsideExport, 在JSP頁面頭部引入控件所需的js, css文件.
<%@ taglib uri="http://www.ecside.org" prefix="ec" %>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="Admin/ecside/css/ecside_style.css">
<script type="text/javascript" src="Admin/ecside/js/prototype_mini.js"></script>
<script type="text/javascript" src="Admin/ecside/js/ecside_msg_utf8_cn.js"></script>
<script type="text/javascript" src="Admin/ecside/js/ecside.js"></script>
其次,構(gòu)建所需的ec:table, 比如一個日志查詢模塊的表格如下, 至于每一個EcSide組件tag屬性意思可以查看幫助使用文檔
<center>
<brstyle="line-height:8px;"/>
<ec:tableitems="all"var="record"
retrieveRowsCallback="limit"
rowsDisplayed="20"showPrint="true"showTitle="true"
sortRowsCallback="limit"filterRowsCallback="limit"
action="LogServlet?status=selectall"useAjax="true"
pageSizeList="10,20,30,50,100"title="系統(tǒng)日志"showTitle="false"
xlsFileName="系統(tǒng)日志.xls"csvFileName="系統(tǒng)日志.csv"pdfFileName="系統(tǒng)日志.pdf"
sortable="true"filterable="true"resizeColWidth="true">
<ec:rowrecordKey="${record.id}">
<ec:columnwidth="60"property="id"title="序號"sortable="false"filterable="false"style="text-align:center"></ec:column>
<ec:columnwidth="120"property="clientIP"title="客戶端IP地址”></ec:column>
<ec:columnwidth="90"property="userName"title="用戶”></ec:column>
<ec:columnwidth="150"property="logTime"title="時間”></ec:column>
<ec:columnwidth="100"property="dvrName"title="設(shè)備名稱” sortable="false" filterable="false"></ec:column>
<ec:columnwidth="90"property="logTypeName"title="日志類別”></ec:column>
<ec:columnwidth="130"property="descript"title="事件描述”></ec:column>
<ec:columnwidth="250"property="comment"title="備注” sortable="false" filterable="false" ellipsis="true"></ec:column>
</ec:row>
</ec:table>
</center>
<textareaid="ecs_t_date"rows=""cols=""style="display:none">
<inputtype="text"class="inputtext"value=""
style="width:100%;"name=""/>
<inputclass="calendarImgButton"onclick="ECSideUtil.showCalendar(this) type="button" id="date_button"/>
</textarea>
<textareaid="ecs_t_input"rows=""cols=""style="display:none">
<inputtype="text"class="inputtext"value=""onblur="ECSideUtil.updateEditCell(this)"
style="width:100%;"name=""/>
</textarea>
一般我們還會帶查詢功能, 該組件支持AJAX方式的查詢, 使用ECSideUtil.queryECForm, 其中l(wèi)istFormName為組件Name, 默認(rèn)為ec
<script type="text/javascript">
//====================== 查詢 相關(guān) ======================== //
function doQueryOper(queryFormName, listFormName)
{
var queryForm=$(queryFormName);
var queryPara={
"txtLogType" : queryForm["txtLogType"].value,
"userName" : queryForm["txtUserName"].value,
"dt1" : queryForm["dt1"].value,
"dt2" : queryForm["dt2"].value
};
ECSideUtil.queryECForm(listFormName,queryPara,true);
}
</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方法中處理
publicvoid doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String path="Admin/error.htm";
String status = request.getParameter("status");
if(status !=null)
{
if("selectall".equals(status) && DAOFactory.CheckUser(request))
{
List all = null;
int currentPage =1;
int size =50;
int allRecords =0;
LogDAO logdao = DAOFactory.getLogDAOInstance();
Limit limit = RequestUtils.getLimit(request);
Sort sort = limit.getSort();
Map sortValueMap = sort.getSortValueMap();
FilterSet filterSet = limit.getFilterSet();
Map filterPropertyMap = filterSet.getPropertyValueMap();
QueryItem queryCondition = new QueryItem();
queryCondition.setType(request.getParameter("txtLogType"));
queryCondition.setBeginDate(request.getParameter("dt1"));
queryCondition.setEndDate(request.getParameter("dt2"));
try
{
allRecords = logdao.getAllCount(sortValueMap, filterPropertyMap, queryCondition);
int[] rowStartEnd=RequestUtils.getRowStartEnd(request, allRecords, size);
if(size > allRecords)
{
currentPage = 1;
}
else
{
currentPage = limit.getPage();
}
all = logdao.findAll(rowStartEnd[1] - rowStartEnd[0], currentPage, sortValueMap, filterPropertyMap, queryCondition);
}
catch(Exception ex)
{
}
request.setAttribute("all", all);
path="Admin/systemLog.jsp";
}
}
// 根據(jù)path路徑進(jìn)行跳轉(zhuǎn)
request.getRequestDispatcher(path).forward(request, response);
}
網(wǎng)頁名稱:ecside介紹
網(wǎng)站鏈接:http://jinyejixie.com/article36/ijcpsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(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)