Model - Sequelize | The Node.js / io.js ORM for PostgreSQL, MySQL, SQLite and MSSQL开源列表组件EcSide
ecside是一个开源的列表组件。
他源自著名开源列表组件 eXtremeComponents （），
但现在已经脱离eXtremeComponents,独立发展（仍有大量代码来自 eXtremeComponents）。
“做最实用易用的列表组件”是ecside最终的目标。
作者：&&( name: Wei Zijun&&& email:&& blog:&)
在使用前，请阅读一下以下信息，以帮助您了解您要使用的将是一个多么不成熟的东西(但它会有成熟的一天，而且那天不会远 呵呵)：
1 ecside不能和原始版本的 eXtremeComponents 同时使用，且不保证能与原先使用 eXtremeComponents 的系统兼容，请见谅。
2 目前只支持GBK编码的应用，请见谅。
3 目前只在IE6 和FireFox2 上进行过测试，不保证兼容其他(版本)浏览器，请见谅。
4 目前提供的样式风格巨丑无比，请见谅。
5 目前没有完备的文档和例子，请见谅。
6 代码没有注释，没有测试用例，请见谅。
7 没有很好的版本控制，没有构建脚本，请见谅。
8 拥有无数未知的bug，请见谅。
ecside发布地址：
ecside圈子:
ecside综合讨论专用帖
&~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
主要增强的功能：
1 可设置工具条位置（上 下 或 不显示）
2 可设置工具条内容（显示哪些 不显示哪些）
3 可设置工具条上各个功能按钮的相对位置
4 增加了调整页大小的选择框，并可自定义选择框内的内容
5 增加了带有邻近页面的导航条
6 增加了可跳转到指定页面的跳转框
7 增加了当前选中行高亮
8 为ec:table 增加了 excludeParameters 和 includeParameters 属性，可以实现更快捷简便的“参数保留/不保留”功能
9 可添加自定义的html代码到工具条内 或其他位置
10&可手动调整列宽
11 增加了“列表内部滚动条”(实现列表头固定，列表体滚动的功能)
12 为ec:row和ec:column 添加更多的html事件支持，现支持：onmouserover onmouserout onclick ondbclick
13 为ec:table ec:row ec:column增加了自定义扩展属性功能
14 增加 ec:extendrow 标签，实现列表扩展行的功能
15 增加shadowRow(影子行)功能：每行下面可以再加一个子行 这个行里显示什么可以由大家自己定义
16 增加页面变量&${TOTALROWCOUNT}&用来标示当前纪录在全部记录中的行数
17 增加了打印功能（尚不完善）
18 ec:column属性增加 ellipsis ,实现单元格内数据过长的时候 自动截短并加&...&的功能(ie only)
19 实现了跨列的列表头
20&统计栏的标题格可跨列
21 增加了若干种cell 和 headerCell,例如checkbox radio
22 取消了imagePath属性,样式相关的图片信息全部提入css内
23 重（第4声）用了js 和css ，很多功能用js来实现
24 支持了ajax翻页
25 支持预查询功能，在察看第n页的时候，把n+1页的数据也查询出来（隐藏着）备用，加快查看下一页的速度
26 将导出excel所使用的组件由poi切换成了 jxl
27 xls导出方式修改 原始的导出是导出的vo/map里的原始数值 现在是导出页面实际显示的内容
28 增加简捷导出方式&(通过ec:table的 xlsFileName pdfFileName csvFileName属性)
29 支持pdf中文导出。
30 代码进行了大规模的重构
31 增加了很多ajax相关特性
32 实现了可编辑列表功能 以及cell的映射功能
上文中对EcSide组件的介绍是我转载自作者其中一篇博文中的内容, 去年开发J2EE项目中需要一个Grid组件, 它能够支持分页, 排序, 过滤, 同时能够导出成Excel, PDF文档, 而这个EcSide组件正好是满足自己所需的一个最合适的组件. 现在这个组件作者已经更名成GT-Grid了,& 功能各方面也作了一些调整, 大家可以访问作者的博客以获取更多最新消息.
其相关一些资料, 可以访问, 有各版本的EcSide组件, 以及相关使用文档与demo程序供下载.
下面我简单介绍这个组件在JSP开发中的使用情况. 去下载作者提供的ECSide文档.rar, 结合来进行学习会比较方便不少, 可以依次看看ECSide入门, ECSide标签属性说明, ECSide基于数据库的分页、排序、过滤, ECSide_FAQ等文章.
ECSide是有一个基于jsp tag的开源列表组件.
简单的说,它就是一组可以帮助你快速实现强大的列表的jsp标签.
它的工作原理很简单.
您将要展现的列表的数据集合(Collection),放入request/pagecontext/session内(使用setAttribute方法.这个工作可以在action/servlet里完成,也可以在jsp页面内完成),然后页面跳转到使用ECSide标签的jsp页面,此时ECSide就可以帮助您展现出所需要的列表.
一个简单的流程通常是这样的.
1 客户端请求action/servlet(如&
2 action接受到请求后,调用相应的BO/dao,执行取列表数据的方法.
3 取得数据后(通常是一个vo/map的list),将数据放入request内(使用requset.setAttribute(key,value)方法.)
4 将请求forward到使用ECSide标签的jsp页面.
5 ECSide将展现出列表.
下面我将自己使用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文件.
&%@ taglib uri=&http://www.ecside.org& prefix=&ec& %&
&meta http-equiv=&Content-Type& content=&text/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&
其次,&构建所需的ec:table, 比如一个日志查询模块的表格如下, 至于每一个EcSide组件tag属性意思可以查看帮助使用文档
&br style=&line-height:8& /&
&ec:table items=&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=&系统日志& showTitle=&false&
xlsFileName=&系统日志.xls& csvFileName=&系统日志.csv& pdfFileName=&系统日志.pdf&
sortable=&true& filterable=&true& resizeColWidth=&true&&
&ec:row recordKey=&${record.id}&&
&ec:column width=&60& property=&id& title=&序号& sortable=&false& filterable=&false& style=&text-align:center&&&/ec:column&
&ec:column width=&120& property=&clientIP& title=&客户端IP地址”&&/ec:column&
&ec:column width=&90& property=&userName& title=&用户”&&/ec:column&
&ec:column width=&150& property=&logTime& title=&时间”&&/ec:column&
&ec:column width=&100& property=&dvrName& title=&设备名称” sortable=&false& filterable=&false&&&/ec:column&
&ec:column width=&90& property=&logTypeName& title=&日志类别” &&/ec:column&
&ec:column width=&130& property=&descript& title=&事件描述”&&/ec:column&
&ec:column width=&250& property=&comment& title=&备注” sortable=&false& filterable=&false& ellipsis=&true&&&/ec:column&
&/ec:table&
&!-- 编辑和过滤所使用的 通用的文本框模板 --&
&textarea id=&ecs_t_date& rows=&& cols=&& style=&display:none&&
&input type=&text& class=&inputtext& value=&&
style=&width:100%;& name=&& /&
&input class=&calendarImgButton& onclick=&ECSideUtil.showCalendar(this) type=&button& id=&date_button& /&
&/textarea&
&textarea id=&ecs_t_input& rows=&& cols=&& style=&display:none&&
&input type=&text& class=&inputtext& value=&& onblur=&ECSideUtil.updateEditCell(this)&
style=&width:100%;& name=&& /&
&/textarea&
一般我们还会带查询功能, 该组件支持AJAX方式的查询, 使用ECSideUtil.queryECForm, 其中listFormName为组件Name, 默认为ec&
&script type=&text/javascript&&
//====================== 查询 相关 ======================== //
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);
最后,&就是由后台相关的Servlet或Action提供组件所需数据, 供Grid呈现, 在&ec:table&中action指定提供数据的url, 如action=&LogServlet?status=selectall&,
对于大数据量的项目最好写个存储过程支持对数据的分页显示. 后台大致代码如下, 如在Servlet的doPost方法中处理
public void 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 =
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&));
allRecords = logdao.getAllCount(sortValueMap, filterPropertyMap, queryCondition);
int[] rowStartEnd=RequestUtils.getRowStartEnd(request, allRecords, size);
if(size & allRecords)
currentPage = 1;
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&;
// 根据path路径进行跳转
request.getRequestDispatcher(path).forward(request, response);
页面最终呈现效果如下
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：202456次
积分：5520
积分：5520
排名：第3244名
原创：354篇
转载：53篇
评论：37条
(2)(1)(8)(2)(2)(1)(1)(1)(9)(4)(2)(2)(1)(40)(10)(6)(17)(121)(100)(3)(74)ecside数据库分页2
二:基于数据库层:
在这种方式下,EC的角色发生了一点点变化.
此时,EC负责把 collection 里的内容展现出来,
同时会向您提供RSF相关的参数.
而这些参数需要您自己手动取得
并传入到DAO中(当然EC提供了很多方便的方法来帮助您取得这些参数),
具体功能的实现需要您自己在DAO中组织相应的SQL语句.
方式二您所要做的工作:
1 查询出所有的数据的总数
2 取得一个ECSide提供的Limit对象
3 在该对象的帮助下取得RSF操作的相关信息(如
数据的起止行数,排序的列和顺序,过滤的列和内容)
将RSF操作的相关信息传入DAO内,来进行SQL语句的拼装(或者其他的操作,如使用ORM工具时)
5 通过DAO,查询出当前页所要显示的数据,放入collection内
6 将collection传给列表页面
这种方式的优缺点正好和方式一相反.
关于两种方式的配置可以看一下 ecside.properties
文件中的下列内容
table.filterRowsCallback.process=org.extremecomponents.table.callback.ProcessRowsCallback&&&
table.filterRowsCallback.limit=org.extremecomponents.table.callback.LimitCallback&&&
table.sortRowsCallback.process=org.extremecomponents.table.callback.ProcessRowsCallback&&&
table.sortRowsCallback.limit=org.extremecomponents.table.callback.LimitCallback&&&
table.retrieveRowsCallback.process=org.extremecomponents.table.callback.ProcessRowsCallback&&&
table.retrieveRowsCallback.limit=org.extremecomponents.table.callback.LimitCallback&&&
其中 ProcessRowsCallback 采用了方式一
,LimitCallback采用了方式二
而table.retrieveRowsCallback.default会告诉EC您默认使用的是哪个.
同样您也可以在 ec:table 标签里 指定
&ec:table&filterRowsCallback="process/limit"&&sortRowsCallback="process/limit"&&retrieveRowsCallback="process/limit"&...&&&&&
大家可能还看到了 org.ecside.monLimitCallback
这个是我自己随意组合出来的一个rowcallback
他在执行分页的时候,使用了方式二,而排序 过滤的时候使用了方式一
所以,大家可能会发现,DEMO中的排序 过滤方法只对当前页有效.
我这么做其实是一种偷懒的方式,但多数情况下,正如网友所说"只排当页数据毫无意义",您们说的没错,的确如此:)
==========================================
下面看一个简单的例子: (以 struts + dao
的方式演示,例子中采用的是ECSide 2.0 RC1版本)
retrieveRowsCallback="limit"&
sortRowsCallback="limit"&
filterRowsCallback="limit"&
在上面的JSP代码中,指定了所有的RSF操作都使用基于数据库层的.
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&eXtremeComponents（1）
以使用Struts为例,说明一下如何使用eXtremeTable的特性
&&&这一切都可以在Action中完成,在Action会用到JSP中eXtremeTable的table标签的属性'tableId' 和'item','tableId'用于完成eXtremeTable的,'item'用于返回你的结果集,不多不少,刚好是你需要查看的那一页的结果集,比如说,你一页是10条记录,那你访问第20页的时候,'item'的结果集就只有第201条到第210条记录.还有就是在request中加入totalRows的属性,表示本次查询结果的数量
另外,JSP的中,eXtremeTable的table标签要retrieveRowsCallback属性,将该属性设为 org.extremecomponents.table.callback.LimitCallback,这是它默认的回调类,你也可以写自已的回调类.设置了该默认的回调类以后,你在Action里就需要向request加入totalRows属性,值为你的查询结果总记录数,这样才会产生翻页的效果.
现在就你的DisplayAction中加的特性了,如下:
Limit limit = LimitFactory.createInstanceOfLimit(request, TABLEID);LimitFactory.setLimitPageAndRowAttr(limit,PAGE_SIZE,TOTAL_SIZE);
这里的TABLEID就是JSP页上标签的属性tableId, PAGE_SIZE是你一页的记录数,TOTAL_SIZE是你查询数据的总数
然后设置totalRow属性,它的值被要求为Integer类型的,转换一下:
request.setAttribute(&totalRows&,new Integer(TOTAL_SIZE));
将后的结果集(一页的内容)放到request的resultList(此为JSP中item属性设置的值)属性中去:
request.setAttribute(&resultList&, getTestData(limit.getCurrentRowsDisplayed(),limit.getPage()));
上面得到数据的函数原形为getTestData(int pageSize,int paget),通过指定一页的记录数和第几页来获得所需的数据,这可以根据数据库的特性,或者通过滑动游标的方式来得到,这里不再傲述.
以下为部分代码:
&ec:table&items=&resultList& var=&item& tableId=&youTableId&&&&&&&& retrieveRowsCallback=&org.extremecomponents.table.callback.LimitCallback&&&&&&&& filterRowsCallback=&org.extremecomponents.table.callback.LimitCallback&&&&&&&& sortRowsCallback=&org.extremecomponents.table.callback.LimitCallback&&action=&${pageContext.request.contextPath}/DisplayAction.do&&imagePath=&${pageContext.request.contextPath}/images/table/*.gif&&title=&TEST&&width=&100%&&rowsDisplayed=&10&&&&&&&& sortable=&false&&&&&&&& filterable=&false&&&&&&&&&& &ec:column property=&name& title=&姓名&/&&&&&&&& &ec:column property=&nickName& title=&别名&/&&/ec:table&
Action部分代码:
Limit limit = LimitFactory.createInstanceOfLimit(request, TABLEID);LimitFactory.setLimitFilterAndSortAttr(limit);LimitFactory.setLimitPageAndRowAttr(limit,PAGE_SIZE,TOTAL_SIZE);request.setAttribute(&resultList&,getTestData(limit.getCurrentRowsDisplayed(),limit.getPage()));request.setAttribute(&totalRows&,new Integer(TOTAL_SIZE));
这样就可以了,相信这也不是很难的东东吧,已经比较详细了,大家应该很容易看懂吧.&
哦,对了,还有,标签里的rowDisplayed属性要和Action中的PAGE_SIZE一致,不然会有问题...
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：305905次
积分：4056
积分：4056
排名：第5321名
原创：19篇
转载：359篇
评论：29条
(1)(2)(2)(3)(13)(1)(8)(8)(11)(11)(143)(71)(47)(4)(10)(3)(40)
() () () () () () () () ()