ecside=grid

好久没发和 eXtremeComponents 相关的东西了 这次带来的是一个全新的扩展 名字上次说过了 叫 ecside （该扩展不需要原ec jar文件的支持） 这个side和 spring side之类的不同 不仅仅是扩展 而是对ec原始代码大规模的重构 修改 和扩展 现在已经不能保证 和原先的老版本 ec完全兼容了 我想最后也许会发展成一个全新的列表组件 呵呵 这个不能算做alpha 或 beta版 最多也就是个 draft 版 (没有文档 没有测试用例 没有构件脚本 没有代码注释 没有完备的示例 含有很多没有删除的无用代码...) 但我还是决定发出来 主要是想证明一下 我没有放弃 我在坚持 同时也希望大家可以提提意见和建议 谢谢了 主要增强的功能： 1 ec:table属性增加 toolbarLocation 用来控制工具条在上还是在下显示 可选值 "bottom" "top" 2 ec:table属性增加 toolbarContent 可自定义工具条显示那些内容，以及排列顺序 默认： toolbarContent="navigation|pagejump|pagesize|export|extend|status" 例子 toolbarContent="pagejump|navigation|export|extend|status" 此时 工具条将不显示页面行数调整框 同时顺序也会和默认的发生变化 navigation 导航条 pagejump 页面跳转 pagesize 页面行数设置 export 导出按钮区 extend 自定义扩展区 status 数据信息区 3 ec:table属性增加 pageSizeList 可用来设置“页面行数选择列表”中的具体数值 默认：pageSizeList="10,20,50,100,1000,2000,all" 其中的all为增加全部显示功能。 例子 pageSizeList="10,20,50" 此时列表里将只显示 10 20 50供选择 4 ec:table属性增加 xlsFileName 用来快捷的实现导出xls文件 如果你只是想使用默认的方式导出 xls文件 不用再使用 ec:exportXls标签了 直接在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" 调整时列的最小宽度 目前不能和过滤功能一同使用 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">&#160;</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> 内部变化： 一下的内容看起来和 上次发布的扩展版看起来很像 其实内部很多地方都重新写了 js精简了 修正了以前的一些bug 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 注意： 目前这个版本不支持pdf文件的导出 不支持csv文件导出(未修改 未测试) 不支持 Sitemesh 不支持treeview