[2007-01-21 18时发布]ecside 1.0rc1: 列表组件eXtremeComponents全面增强版

ecside介绍：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ecside是一个开源的列表组件。
他源自著名开源列表组件 eXtremeComponents （http://www.extremecomponents.org），
但现在已经脱离eXtremeComponents,独立发展（仍有大量代码来自 eXtremeComponents）。
“做最实用易用的列表组件”是ecside最终的目标。

作者： fins ( name: Wei Zijun    email:[e-mail]   blog:http://fins.iteye.com )

在使用前，请阅读一下以下信息，以帮助您了解您要使用的将是一个多么不成熟的东西(但它会有成熟的一天，而且那天不会远 呵呵)：
1 ecside不能和原始版本的 eXtremeComponents 同时使用，且不保证能与原先使用 eXtremeComponents 的系统兼容，请见谅。
2 目前只支持GBK编码的应用，请见谅。
3 目前只在IE6 和FireFox2 上进行过测试，不保证兼容其他(版本)浏览器，请见谅。
4 目前提供的样式风格巨丑无比，请见谅。
5 目前没有完备的文档和例子，请见谅。
6 代码没有注释，没有测试用例，请见谅。
7 没有很好的版本控制，没有构建脚本，请见谅。
8 拥有无数未知的bug，请见谅。

ecside发布地址：
http://fins.iteye.com/blog/40190

ecside发布地址：
http://fins.iteye.com/blog/40190
ecside圈子:
http://ecside.iteye.com/
ecside综合讨论专用帖
http://fins.iteye.com/blog/48723 

其他出色的列表组件(有些是收费的)：
eXtremeComponents原始版 ( http://www.extremecomponents.org )
dhtmlXGrid ( http://scbr.com/docs/products/dhtmlxGrid/ )
displaytag ( http://displaytag.sourceforge.net )
nitobi grid ( http://www.nitobi.com/products/grid/ )
ActiveWidgets gird ( http://www.activewidgets.com/grid/ )
rico livegrid ( http://openrico.org/rico/livegrid.page )

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
主要增强的功能：
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的映射功能
... ...

更新日志：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
新增加的特性通常都在 demo.do.jsp这个例子里进行演示。

===============================
2007-01-21 15点
===============================
对于以下更新，demo.do.jsp进行了修改，大家看看例子可能会更好理解.

1) 实现了cell的映射功能（详见示例的性别 和 角色列）,用法:
了一个简单的小标签 用来从map生成 select的option列表。
<ec:options tagattributes="附加的html属性" defaultkey="默认选中的option的value" items="MAP在context内的key"></ec:options>

xml 代码

<ec:column mappingItem="用来映射的MAP在context内的key" mappingDefaultValue="当找不到映射值时要使用的默认值".../>

例如，在示例中，角色的信息以 “标识--名称”的形式放到了一个 map内
在action中 把这个map放到了 request.setAttribute("USERROLE_MAP", CommonDictionary.USERROLE);内
在页面使用

xml 代码

<ec:column property="USERROLE" title="角色" mappingItem="USERROLE_MAP" mappingDefaultValue="[错误的角色]"/>

就会自动将名称显示出来。
2) 做

xml 代码

<ec:options items="MAP在context内的key" defaultKey="默认选中的option的value" tagAttributes="附加的html属性"/>

3) 对ec:extend标签做了扩充，增加了位置设置属性 location
top: form内列表主体前  ; bottom : form内列表主体后 
toolbar或不设置location属性  在toolbar的扩展位置.
4) 代码进行了一点点修改，对使用没有影响。

===============================
2007-01-20 9点   ECSIDE 1.0 RC1 发布啦
===============================
沉寂两天，但一直没有闲着，带来了大变化 索性来个 1.0 RC1 版 :) 。
1) 实现了灵活的可定制的“可编辑列表”功能 （详见help.txt 200行左右的描述 以及示例）
支持多种编辑方式（文本框 下拉框 将来还会支持更多），可自定义模版（使用自定义的文本框 下拉框），还提供了：
对可编辑列进行标识，对编辑过的cell进行标识（默认为改变单元格背景色），
使用ajax技术提交后台，提交成功的cell将清除编辑标识 等贴心设计。
2) 增加了 高亮显示选中行的功能，使用 ec:table属性: selectlightRow="true"
3) 去掉了 fullnavigation导航条，将其与navigation导航条合并
改为为ec:table增加属性 nearPageNum="数字" 用来设置导航条前后显示的邻近页数 等于0时 为不使用邻近页。
4) 为ec:table增加了 maxRowsExported="数字" 属性，用来限制导出大最大条数， 如果数据超过这个数目，则不执行导出操作。
5) 为之前增加的ec:table的pageSizeList属性 增加了特性
pageSizeList="max:200,10,15,30,50,100,all" 如果 10--100以及all中，某一项大过了max的200则 不在列表中显示。
也可以只使用pageSizeList="max:200" 此时将 使用默认设置，并进行max控制。
6) 解决了pdf中文编码问题，终于支持pdf导出了。
7) 恢复了对sitemesh的支持，用法见原版ec文档（我没有亲自没有测试,因为我不会用sitemesh :( ）。
8) Ajax翻页优化，同时增加了 ECSide.findAjaxZoneAtClien 属性，可设置 客户端 还是 服务端进行 html代码剪裁。
默认推荐使用 服务器端。
9) 再次对js和java代码进行了较大规模的重构,清理了一些无用代码，添加了必要的协议信息。
10) 一些细节的修改(例如对滚轮的支持更自然,filterable="true"手动调节列宽功能屏蔽等)
还有对一些小bug的修正，但是由于变化较大，肯定还会带来一些新bug。
11) 整个示例的应用逐步发展为 ecside 的最佳实践，加入了hsqldb（hsqldb的使用参考了springside），全新的例子。
当然还不够好 会在以后的日子里继续完善。
12) 做了一个简单的logo :)。

顺便问一下：
我使用了 springside 的 HsqlListener （做了些修改 但绝对不涉及到核心），为什么在每次重启应用的时候总是包下面的异常呢？？
Exception in thread "HSQLDB Timer @15d63da" java.lang.NullPointerException
 at org.hsqldb.lib.HsqlTimer.nextTask(Unknown Source)
 at org.hsqldb.lib.HsqlTimer$TaskRunner.run(Unknown Source)
 at java.lang.Thread.run(Unknown Source)

===============================
2007-01-16 14点
===============================
1) 当使用“列表内部滚动条”时，可以使用百分比来设置列表的宽度了。
(但还是建议您使用像素（px）作为列表和列的宽度单位,因为百分还有一些小bug)
还有个建议 不管是使用什么样的宽度，建议都要使用一个“自动宽度”的column，
就是说不要给所有的ec:column都指定width，给其中一个点“自由”，这样很多已知的关于列宽调整的问题都可以解决。
2) 对eccn.js进行了大量的修改，提供了更好(但不完美)的IE和FF兼容（一致）性（这个工作差点把我累吐血）.
ff和ie 在取得对象坐标和宽度的算法不同 太郁闷了
3) 修正了一些bug。

===============================
2007-01-12 以及之前的一些更新日志
===============================
1) 为“列表内部滚动条”增加了对鼠标滚轮的支持(只在ie6和ff2下测试过,其他版本没有测试)
2) 将部分“列表内部滚动条”相关的代码从java中提出,改用js实现.
3) 对js文件做了一些调整。
4) 修正了一些小bug。

===============================
1) 修正了一个“列表内部滚动条”的bug
该bug表现为在 IE里 有些windows的主题下，纵向滚动条不可用。FT!!!!!
2) eccn.js做了一点小小的改动，为将来做过编码支持打下了一点点基础.

===============================
1) 修正了改变页面大小时“列表内部滚动条”错乱的bug
2) 重构了“列表内部滚动条”相关的js和java代码

===============================
1) 修正了使用ajax翻页时“列表内部滚动条”错乱的bug
2) 增加了当列表内容的实际宽度和高度小于设置的宽度和高度的时候，
   自动调整区域大小,同时自动隐藏滚动条（只隐藏横向的）的功能。

===============================
增加了“固定列表头，滚动列表体”(“列表内部滚动条”)的功能
这个功能实现起来比我一开始想像的复杂
不是简单的使用一个 div overflow:scroll就可以搞定的
虽然功能是支持了 但是代码肯定还有很多bug或者是可以改进的地方
欢迎大家积极的提出宝贵的意见 谢谢了

使用方法：
ec:table标签内 增加
listHeight="数字" 属性 （指定列表体的高度）
同时把要指定 width="数字" 不能省略 同时要使用绝对大小 而不要使用百分比

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

部分增强功能简介：
（详见help.txt）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

我们有自己的圈子了
以后大家有 ecside相关的问题 可以去圈子里
我的 blog里问( http://fins.iteye.com/blog/48723 ) 
别在发消息了 因为发消息别人看不到 而有些问题可能别人也遇到过 或者是我回答的不对 别人也可以帮忙
对吧?
谢谢大家

ecside发布地址：
http://fins.iteye.com/blog/40190
ecside圈子:
http://ecside.iteye.com/
ecside综合讨论专用帖
http://fins.iteye.com/blog/48723 

 

我申请了javascud项目 而且也申请了svn 但是不会用啊  :'( 谁来教教我啊

 

 依赖包已经上传到 圈子的共享空间里了

共3个 请解压缩后放到 WEB-INF/lib下 如果不导出pdf可以不下载pdf相关的包 和 字体文件 这两个比较大  

评论

59 楼 fins 2007-01-03  

boin 写道

提供一个反馈。

工具条翻页组件里面有中文字符，在UTF-8环境下会乱码，建议把中文字符提出放在外部文件中。

汗了。。不少代码都是是GBK...

苦了我这个用UTF-8的。。我已经开始改进I18N的相关代码了。。。

关于过滤器:

那个过滤器的编码是可以设置的 在 web.xml里设置
只是如果不设置那么默认就是gbk


其他还有哪些地方是? 发现的话麻烦告诉我一下 我好改
当初写的时候确实比较懒 毕竟项目要用 挺急的 结果...
见笑了 大家多包含

58 楼 fins 2007-01-03  

hql_lims 写道

我刚才又查找了下原因，发现是取不到当前显示的页面数据条数

也就是int pageSize=limit.getCurrentRowsDisplayed();取到的总是0

取到当前页面的数据显示条数不是这个方法吗？

你页面内设置 rowDisplayed="11" 了吗?

57 楼 sybase 2007-01-03  

另外，我改了这样一行代码
president.put("term", "178917973443563563436432");

导出在xls文件中显示为1.78917973443564E+23，能有什么办法解决这个问题使它在xls中原样显示吗?

谢谢你，新年快乐，为你的劳动喝彩。

56 楼 fins 2007-01-03  

to hql_lims:

我不知道 applyFacade.getQueryListForEcside()你具体是怎么写的
能否提供一下代码?

还有 关于排序
建议你看一下面的参数设置
table.sortRowsCallback.default=org.extremecomponents.table.callback.ProcessRowsCallback
table.sortRowsCallback.limit=org.extremecomponents.table.callback.LimitCallback

因为 排序 过滤 分页 都有属于自己的callback类 不是分页设置了limit其他的就会自动也是limit的 你应该自己设置一下 然后还要在action里自己再写些东西才行
我们不使用排序 和过滤 所以对这两个部分我没有修改
你可以看一下官方的wiki(有中文的)

55 楼 hql_lims 2007-01-03  

我刚才又查找了下原因，发现是取不到当前显示的页面数据条数

也就是int pageSize=limit.getCurrentRowsDisplayed();取到的总是0

取到当前页面的数据显示条数不是这个方法吗？

54 楼 sybase 2007-01-03  

楼主，你太强了。我要赞美你！！！
提个问题，我在demo1.jsp中加入filterable="true"
想用这种方式来filter,例如  ‘%王%’，但好像还不支持这种模糊条件.

53 楼 fins 2007-01-03  

boin 写道

提供一个反馈。

工具条翻页组件里面有中文字符，在UTF-8环境下会乱码，建议把中文字符提出放在外部文件中。

汗了。。ECSideFilter 也是GBK...

苦了我这个用UTF-8的。。我已经开始改进I18N的相关代码了。。。

谢谢 已经更正,但未上传!!!

顺便又修改了两个小bug

明天一起更新 

再次感谢!!!

52 楼 boin 2007-01-03  

提供一个反馈。

工具条翻页组件里面有中文字符，在UTF-8环境下会乱码，建议把中文字符提出放在外部文件中。

汗了。。不少代码都是是GBK...

苦了我这个用UTF-8的。。我已经开始改进I18N的相关代码了。。。

51 楼 hql_lims 2007-01-03  

fins:
   新年好！
   我尝试了你的更新版本，自己依据情况做了数据库分页面操作，但是我发现有个奇怪的问题出现：
   我数据库里面是12条记录。
   默认每页显示10条的情况下，不能正常翻页到第二页
   默认每页显示11条的情况下，能正常翻页了，但是第二页缺少一条，通过界面我选择显示20条，也仅仅给我显示11条记录。
   而且排序不管以多少行显示，都没有按照数据库排序。
   不知问题出自那里。

我查看了下我的代码，区别在于我没有按照rowStart和rowEnd方式取数据的那样设置取数据的，以下是我ACTION代码

		Context context = new HttpServletRequestContext(request);
		LimitFactory limitFactory = new TableLimitFactory(context);
		Limit limit = new TableLimit(limitFactory);

		int beginPage=limit.getPage();
		int pageSize=limit.getCurrentRowsDisplayed();
		if(beginPage<=0){
			beginPage=0;
		}
		if(pageSize<=0){
			pageSize=11;
		}

		String query ="from Apply";
		
		QueryListObj queryListObj = applyFacade.getQueryListForEcside(query, limit.getSort(), limit.getFilterSet(), beginPage, pageSize);
		//取到总数
		int totalRows = queryListObj.getCount();
		limit.setRowAttributes(totalRows, pageSize);
		
                //取到集合
		Collection applys = queryListObj.getElemList();
		
		request.setAttribute("applys", applys);
		request.setAttribute("totalRows", new Integer(totalRows));		

		// 记录操作日志־
		saveLog("applyer", "查询申请列表");
		return mapping.findForward("listForEcside");

50 楼 fins 2007-01-03  

我们除了封闭　其他的都封了　qq msn kugoo .....

49 楼 差沙 2007-01-02  

你最近跑到哪里去了？以为你封闭开发了呢。
在QQ上联系一下吧。过年到哪过？

48 楼 hejian1860 2007-01-02  

谢谢pins  

一直想抽空规整一下ec，前段时间看到差沙改的，但没有应用到项目中，回头就试用您这个

47 楼 fins 2007-01-02  

sybase 写道

  搂主，能放一个make文件吗，或者将你编译好的class文件
传上来给大家好吗？这样我想大家会更加感激你的，毕竟下下来自己还要花很多时间去编译你的原代码！！！！

自己编译一下也不太难吧

关键我不会ant 不会任何自动构建的工具
而且我用的jdk1.6怕弄完的别人机器上有问题

46 楼 fins 2007-01-02  

sybase 写道

所需jar文件的列表在那里？？？？？？？？？

web-inf/lib/下的那个txt文件

45 楼 sybase 2007-01-02  

所需jar文件的列表在那里？？？？？？？？？

44 楼 sybase 2007-01-02  

  搂主，能放一个make文件吗，或者将你编译好的class文件
传上来给大家好吗？这样我想大家会更加感激你的，毕竟下下来自己还要花很多时间去编译你的原代码！！！！

43 楼 fins 2007-01-02  

更新了 顶一下
顺便问一下
怎么设置能让我在发帖和编辑帖子的时候不使用那个所见即所得的编辑器啊?

42 楼 lsqlister 2007-01-02  

感谢啊。

41 楼 lark3 2007-01-02  

fins 写道

firedragon 写道

希望能做出表头固定和分页栏固定的样式，要不然列表太长时表头会看不见，翻页一定要把页面拉到下方或上方才能继续。不过这些通过CSS都可以实现的。

确实不难
把列表头 列表内容 工具条分离
给列表内容套个div 再加个 overflow就可以

但是"固定表头"和"列表内容"的列对齐比较难搞定
因为当你不设置table-layout:fixed的时候
列表的列往往会和你最初设置的不同(会被撑宽或挤窄)
这时候列表头自动跟着调整就比较麻烦
当然 这不是不能实现的 就是需要写些js

很佩服你的工作，添加了很多实用的功能。
我也曾经改造过ec，不过完成的功能仅仅是你实现的一部分而已。
对表头固定及列固定的实现思路和你是一样的，而且也碰到你所说的列撑开问题。
我的解决办法是：
在初始化“列表内容”的列时，设置其width="2px"(一个很小的宽度)，然后运行一段js代码，根据“固定表头”的列宽度来设置对应的“列表内容”的列宽度，这样便达到了对齐的目的。（以后每次列表头宽度调整时就运行这段js代码，对齐列表内容的列）
遗憾的是列固定没机会实现。。。

40 楼 oboaix 2006-12-31  

好东东，学习...