ecside二次笔摘

 这几天偶尔会碰到ecside的问题，零零碎碎碰下来也对他有了一点了解，有些问题从网上搜到了答案，有些问题绕开了解决。不过，总的来说，ec还是一个不错的作品，虽然原作者已经改为开发一个新的替代产品。
下面是从网上转载的资料，可以用来参考：
http://blog.sina.com.cn/s/blog_4b22130e010009b5.html~type=v5_one&label=rela_prevarticle


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


 
请教楼主，下了你的代码试了一下，如果把默认DEFAULT_PAGE_SIZE改为别的数字，比如每页显示5条，分页错误，点击下一页，显示还是10条，

你的jsp页面里的 ec:table的 rowsDisplayed 属性也要修改 改为5

bjwulin 写道

fins 写道


没太看明白　　:(


reload第一个表格　你是在怎么reload的？？


我描述不清楚，这样说吧，如果表格有21条数据，每页10条，现在在第三页，如果我在数据库里面手工删除1条数据，然后调用EcUtil.reload(...)的话，怎么让它显示第二页的数据。因为我在后台得到的还是pageNo=3


我不明白的就是
为什么"后台得到的还是pageNo=3"??


你后台是怎么计算页数的?
我怀疑可能是你没有调用EccnUtil.refresh(...)
如果数据数目发生变化了
建议 先
EccnUtil.refresh(...)
再
EccnUtil.reload(...)


 
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) 还有一些细节的修改(例如对滚轮的支持更自然) 和对一些小bug的修正，但是由于变化较大，肯定还会带来一些新bug。
11) 整个示例的应用逐步发展为 ecside 的最佳实践，加入了hsqldb（hsqldb的使用参考了springside），全新的例子。
当然还不够好 会在以后的日子里继续完善。
12) 做了一个简单的logo 。


 



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


 


smalldeer 写道


一直关注ecside，谢谢你们的无私奉献，真的增强好多。
有一个问题请教，我在一个页面中，要使用2个表格，
如果不写request.setAttribute("totalRows", new Integer(rowc));
就会报 You need to specify the totalRows (as an Integer) to use the org.extremecomponents.table.callback.LimitCallback.
如果写，但是有2个table，参数只有一个totalRows，我如何为2个表格分别指定它的totalRows呢


请教一下，十分感谢。


说来惭愧啊
我虽然一直在研究ec的代码 并做出改造
但是 有几个地方我一直没有深入的涉及
其中就包括 同一叶面显示多表格的设计


因为我一直认为这不是一个好的实现方式


其实代码是这样的
他先去找 tableId+"_totalRows"
找不到了 才去找 totalRows
我的那个例子对你有误导 我的错


 


ecside介绍：


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


ecside是一个开源的列表组件。


他源自著名开源列表组件 eXtremeComponents （http://www.extremecomponents.org），


但现在已经脱离eXtremeComponents,独立发展（仍有大量代码来自 eXtremeComponents）。


由于各种协议和各种授权的问题，目前还不能独立成为一个开源项目，但“做最实用易用的列表组件”是ecside最终的目标。


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


(详见readme.txt)



基础功能的使用请参考 eXtremeComponents 官方网站(http://www.extremecomponents.org)的wiki（有中文版）
 


增强的功能简介：


1  ec:table属性增加  toolbarLocation


 用来控制工具条在上还是在下显示


 可选值 "bottom" "top" "none"（不显示）


 

2  ec:table属性增加  toolbarContent


 可自定义工具条显示那些内容，以及排列顺序


默认： toolbarContent="navigation|pagejump|pagesize|export|extend|status"


例子    toolbarContent="pagejump|navigation|export|extend|status"


此时 工具条将不显示"页面行数调整"框同时顺序也会和默认的发生变化


 


navigation 导航条


pagejump 页面跳转


pagesize 页面行数设置


export 导出按钮区


extend 自定义扩展区


status 数据信息区


 


同时 为ec:table增加属性 nearPageNum="数字",


用来设置导航条前后显示的邻近页数,不设置将使用默认值，设置为0则不显示邻近页



3  ec:table属性增加  pageSizeList


可用来设置“页面行数选择列表”中的具体数值


默认：pageSizeList="10,20,50,100,1000,2000,all"


其中的all为增加全部显示功能。


例子   pageSizeList="10,20,50"


此时列表里将只显示 10 20 50供选择


max:数字 特性 :


pageSizeList="max:200,10,15,30,50,100,all"


如果 10--100以及all中，某一项大过了max的200则不在列表中显示。


也可以只使用pageSizeList="max:200" 此时将使用默认设置，并用max限制。


 
4 ec:table属性增加 xlsFileName  和 pdfFileName


用来快捷的实现导出xls文件


如果你只是想使用默认的方式导出 xls 和 pdf文件 不用再使用 ec:exportXls  ec:exportPdf标签了


直接在ec:table里使用这个属性就ok.


使用方法 xlsFileName="文件名.xls"


 


5  ec:table属性增加  showPrint


显示打印按钮，该功能只能在ie 5.5以上浏览器中使用没有使用第三方组件 使用了ie内置组件


使用方法： showPrint="true"


打印按钮将作为导出的一种类型而存在


 
6 ec:table属性增加  resizeColWidth 和 minColWidth


默认：  resizeColWidth="false"  minColWidth="20"


用来实现手动调节列宽的功能 在ie 5.5+ 和ff 2.0下测试通过


resizeColWidth="true" 实现列宽调整


minColWidth="20" 调整时列的最小宽度


目前不能和过滤功能一同使用(当filterable="true"时候不可以用)


 


 7 为ec:row 添加更多的html事件支持，现支持：onmouserover onmouserout onclick ondbclick


 
8 为ec:column 添加更多的html事件支持，现支持：onmouserover onmouserout onclick ondbclick


 9 为ec:table ec:row ec:column 增加了 tagAttributes属性


该属性用来为元素增加一些自定义的html属性


例如  ec:column 现在并不支持  onmouseup事件


可以通过下面的方式实现

<ec:column tagAttributes="onmouseup=\"alert('test mouse up');\" " .......



10 ec:column属性增加 ellipsis


实现单元格内数据过长的时候 自动截短并加"..."的功能 ie only


因为ff不支持 text-overflow: ellipsis;


使用 ellipsis="true"


使用时 还要为ec:table加上 style="table-layout:fixed;" (如果您已经使用了调整列宽功能 则不用添加)


 


11 ec:column属性增加  headerSpan


实现表头的跨列显示


使用


<ec:column  headerSpan="2" ...


<ec:column  headerSpan="0" ...


注意当把 一个column 的 headerSpan=设置为 n的时候


那么他下面的 n-1个 column 的 headerSpan 一定要为 0 (这个以后会想办法修正现在这么处理太麻烦了)


 


12 ec:column属性增加  calcSpan


 实现统计行的标题跨列显示


 使用 


 <ec:column  calc="total" calcTitle= "合计" calcSpan="2" ....


 

 13 增加 ec:extendrow 标签


在列表前/后加一行或多行 取决于你的html代码怎么写因为这个是绝对自由的 连tr标签都要自己写


 before="true"  (true top false(默认))


 当 before="top"的时候 所加行会出现在 列表表头的上面


 这样你可以做多行表头了  （但这时候 不支持列宽调整 想支持需要自己做些动作详见示例文件demo2.jsp）


例如


    <ec:extendrow before="true">


    <tr>


    <td style="background-color:#ffeedd" >*列表前扩展行</td>


    <td style="background-color:#ffeedd">可以在这里加一些自定内容</td>


    <td style="background-color:#ffeedd" colspan="2">该行与ectable在同一table内</td>


    </tr>


    </ec:extendrow>


     <ec:extendrow>


    <tr>


    <td style="background-color:#eeddff"> </td>


    <td style="background-color:#eeddff">*列表后扩展行</td>


    <td style="background-color:#eeddff">可以在这里加一些自定内容</td>


    <td style="background-color:#eeddff">该行与ectable在同一table内</td>


    </tr>


    </ec:extendrow>


 


 14 增加 ec:extend 标签


用来在toolbar内增加一些自定义的html代码属性


例如 <ec:extend><a href="#">自定义扩展内容</a></ec:extend>


这时该连接 将会出现在 toolbarContent 中的 extend所在位置


 


 


 15 增加 ec:extendbar 标签


在列表前/后加些html代码  属性  before="true"  (true top false(默认))


如果要加的东西比较多  建议使用这个而不要使用ec:extend


ec:extendbar 添加的内容不会和组件自带的tool放到一行


 当 before="top"的时候 所加内容会出现在 列表和列表标题之间


例如


    <ec:extendbar before="true" >


        <span style="color:#999999">*工具条 前扩展块:可以在工具条前加些你自己想加的东西，<b>所加内容和ectable在同一form内</b></span>


        </ec:extendbar>


    <ec:extendbar>


        <span style="color:#999999">*工具条 后扩展块:可以在工具条后加些你自己想加的东西，<b>所加内容和ectable在同一form内</b></span>


    </ec:extendbar>


 


 


16 增加了cell类型


复选框 cell="checkbox"  headerCell="checkbox"


单选框 cell="radiobox"  headerCell="riadiobox"


例如


<ec:column cell="checkbox"  headerCell="checkbox"


alias="chkBoxNameXXX" value="chkValue${pre.nickname}"


width="22" viewsAllowed="html" />


注意 value对应生成的 checkBox 的 value ,alias 对应生成的 checkBox 的name


 


 


17 增加页面变量 ${TOTALROWCOUNT} 用来标示当前纪录在全部记录中的行数


（${ROWCOUNT}用来标示当前纪录在当前页中的行数）


例子


<ec:column property="name" title="姓名" width="160">${TOTALROWCOUNT},${pre.name}</ec:column>


 


 


18 增加了“固定列表头，滚动列表体”(“列表内部滚动条”)的功能


这个功能实现起来比我一开始想像的复杂


不是简单的使用一个 div overflow:scroll就可以搞定的


虽然功能是支持了但是代码肯定还有很多bug或者是可以改进的地方


欢迎大家积极的提出宝贵的意见谢谢了


 


使用方法：


ec:table标签内增加


listHeight="数字" 属性 （指定列表体的高度）


同时把要指定 width="数字" 不能省略同时要使用绝对大小 而不要使用百分比


详见例子:


demo0.jsp


 


 


 


19 增加shadowRow功能


shadowRow我自己瞎起的名字解释如下：


每行下面可以再加一个子行这个行里显示什么可以由大家自己定义


常见的应用是在有些论坛论坛主题列表里当你点击行开头的小加号的时候 会在这行下面展开一个区域那里面显示的是主帖的内容.


我们可以把这个扩展一下利用ajax从后台去读取我们想读取的信息,这样我们就可以做任何我们想做的事情了)


该功能是不通过标签或java代码实现 纯js实现。


详见例子 demo0.jsp （大家一定要注意看demo0.jsp里的注释啊 呵呵）


其实有了这个功能，大家已经可以自己比较容易的实现可编辑表格的功能了呵呵过一阵我会发一个例子上来


 


 


20 ec:table 增加了 excludeParameters 和 includeParameters 属性


使用后，ecside将自动排除或保留属性中所指定的“表单属性”


这个如果你理解了 autoIncludeParameters 的用处就不难理解这两个属性的用处了


注意: excludeParameters 比 includeParameters 有更高的优先级


即 excludeParameters="a"  includeParameters ="a" 时 a仍然将被排除


建议尽量使用 excludeParameters 不要使用 includeParameters ，除非你非常明确自己要包含的东西。


includeParameters 使用不当会使你忘记包含一些必须包含的东西.


 


excludeParameters="表单属性名称1,表单属性名称2"    (表单属性名称不能含有半角的逗号)


includeParameters="表单属性名称3,表单属性名称4"


 


21 实现了灵活的可定制的“可编辑列表”：


在ec:column 中指定下列属性：


 


cellName="这个cell在数据库中真正对应的列名，省略时则自动使用 property对应的名称"


cellValue="这个cell在数据库中真正对应的值"


cellEdit="a1,a2,a3" 


    a1编辑类型(目前可选input select 其他如radio等还不完善)，


    a2对应的模版textarea的ID(默认是 "ec_edit_template_'+编辑类型 ),


    a3触发编辑的事件（默认是ondblclick）


模版为一段写在textarea内的表单域的html代码，书写是完全自由的但是一定要注意不要缺少必要的事件方法和属性。


 


 


22 增加了 高亮显示选种行的功能，使用 ec:table属性: selectlightRow="true"


 


 


23 为ec:table增加了 maxRowsExported="数字" 属性，用来限制导出大最大条数，


如果数据超过这个数目，则不执行导出操作。


 


 


24 实现了cell的映射功能（详见示例的性别和 角色列）


用法：


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


例如，在示例中，角色的信息以 “标识--名称”的形式放到了一个 map内


在action中把这个map放到了 request.setAttribute("USERROLE_MAP", CommonDictionary.USERROLE);内


在页面使用


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


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


 


 


25 做了一个简单的小标签用来从map生成 select的option列表


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


 


 


 


还有很多细节的改动，暂略...


 


 


 


内部变化：


 


 


1 提炼了ectable生成的js


ectable 原先的实现会在页面内生成大量的js代码非常不好


现在翻页相关的js代码全部提炼成了 js函数


 


2 翻页按钮的外观提炼成由css决定而不是图片决定。


ectable原版生成的是 <img ... src="图片路径" />


现在生成的是 <input type="button" class="样式" />


这样要改变外观只要去修改“样式” 中的背景图片就ok了


filter clear 按钮 暂时还没有这么处理


 


3 ！！！翻页机制全部使用ajax实现！！！


(没有使用任何的ajax后台框架(如dwr ajaxAnywhere)，纯js端实现)


filter 排序功能还没有使用ajax


 


4 支持 预查询功能（利用ajax实现）


例如在用户察看第5 页数据的时候，系统会偷偷的把 上一页和下一页的数据也查出来


并放到隐藏的textarea内 ，翻页的时候无需再查询


当然这个功能有利弊，所以是可设置是否开启


 


 


5 将导出excel所使用的组件由poi切换成了 jxl


原因有2


1 jxl这个项目没有死仍然在继续发展


2 jxl似乎对内存要求更小


(poi在导出20000条纪录的时候outofmemery了,jxl则顺利完成任务)


 


jxl官方网址


http://www.andykhan.com/jexcelapi/index.html


 


 


6 xls导出方式修改如果了解代码的人一定知道 默认的导出xls时是导出的vo/map里的原始数值


而不是页面实际显示的内容，这个问题现在解决了。


 


 


7 代码进行了较大规模的重构分离出了tool模块(但这个模块还不够灵活下一版本打算在这个基础上争强扩展性灵活性)


你可以自己写tool来取代组件内设的tool


组件默认的 tool 配制在 extremetable.properties 文件内


 


tool.navigation=org.ecside.tool.PageNavigationTool


tool.pagejump=org.ecside.tool.PageJumpTool


tool.pagesize=org.ecside.tool.PageSizeTool


tool.export=org.ecside.tool.ExportTool


tool.status=org.ecside.tool.StatusTool


tool.extend=org.ecside.tool.ExtendTool


tool.blank=org.ecside.tool.BlankTool


tool.|=org.ecside.tool.SeparatorTool


tool.,=org.ecside.tool.NewLineTool


 


如果你想实现 自己的导航 可以 继承抽象类BaseTool


然后修改配制例如


tool.navigation=com.mytest.MyNavigationTool