- 浏览: 163874 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
itpengweieye:
楼主有中文版的没啊
agile java -
itpengweieye:
非常感谢分享
agile java -
xiao_xgy:
谢谢啊.......
Expert One-on-One J2EE Design & Development -
gwh_08:
兄弟,Expert_One-on-One_J2EE_Desig ...
Expert One-on-One J2EE Design & Development -
ly250616150:
function fomatFloat(src,pos){ ...
js 保留两位小数
0.概述
Home Page:http://www.extremecomponents.org
Extreme Table是最功能强大而又容易配置,扩展,自定义的Table 控件。
最紧要的功能包括排序, 分页, 导出Excel, pdf和汇总。
springside的best 示例代码在: listBook.jsp和listOrder.jsp.
基础读物:
1. ExtremeTable自带的文档 .
2.Luck翻译的ExtremeTable官方文档中文版
1. 安装
1.1 安装原始版本
1. 从http://www.extremecomponents.org 下载最新版
2.把extremecomponents.jar 放入web-inf/lib
3.根据minum, 导出excel 或 导出pdf的需要,把/lib下的jar copy到web-inf/lib
4.把images里的图片放入web的任意目录
5.把css文件放到web的任意目录
6.在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,把它复制到WEB-INF/classes里面并进行修改.
7.修改web.xml (见2)。
0.2 复制SpringSide的样式
1.Copy springside的Table Head的图,查。
2.将springside中的修改版extremecomponents.css文件放入任意目录
3.把/src/resource/extremetable.properties 复制到对应目录
0.3 使用Compact View很重要
默认的式样不符合大家的审美,幸亏还有Compact View和css设置,让我们可以敬谢不敏它号称非常方便的HtmlView子类扩展。
1. 在全局设置里
table.view.html=org.extremecomponents.table.view.CompactView 2.把images里/table/compact/*.gif copy 到 /table
2.全局属性配置
ExtremeTable支持在properties文件里方便的统一配置丰富的全局属性
在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,把它复制到WEB-INF/classes里面.
在web.xml里面增加
<context-param> <param-name>extremecomponentsPreferencesLocation</param-name> <param-value>/extremetable.properties</param-value> </context-param>一般只写需要修改的文件:
table.filterable=falsetable.imagePath=/images/table/*.giftable.locale=zh_CNtable.view.html=org.extremecomponents.table.view.CompactViewrow.highlightRow=truecolumn.format.date=yyyy-MM-ddcolumn.format.currency=###,###,###,###,#00.003.导出Excel
注意Excel 导出的Tag已改为,且官方版不支持中文文件名。
<ec:exportXls fileName="BookList.xls" tooltip="导出 Excel"/>在web.xml必须加入:
<filter> <filter-name>eXtremeExport</filter-name> <filter-class>org.extremecomponents.table.filter.ExportFilter</filter-class> </filter> <filter-mapping> <filter-name>eXtremeExport</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ExtremeTable导出的一项重要特性是可以根据不同的View导出不同的列.
比如html管理界面可能只列出订单几个最重要的列,而导出excel时则需要导出所有的列。
<ec:column property="orderdate" title="订单日期" cell="date" format="yyyy-MM-dd" viewsDenied= "html"/>又比如有些操作按纽的列只想在html出现,excel里不想出现:
<ec:column property="orderdate" title="订单日期" viewAllowed= "html"/> 以上订单日期列在html view看不到,而excel,pdf view可以见到.
而"编辑图标","选择Checkbox"这些管理界面上的列,也可以设置不export到pdf,excel view
4.其他要点
4.1. 使用排序功能时,如果property为嵌套属性时,需要设置alias
因为javascript的关系.
<ec:column property="customer.name" title="客户名称" alias="customer"/>4.2. Date Cell与NumberCell 和RowCountCell
在全局属性定义:
column.format.date= yyyy-MM-ddcolumn.format.currency= ¥###,###,#00.00<ec:column property="totalprice" title="总金额" cell="currency" width="80" /><ec:column property="shipdate" title="发货日期" cell="date" width= "80"/><e其中RowCountCell用于显示序号。
4.3. 汇总
在column中加入两个cac属性,就会自动在table的底端显示汇总
<ec:column property="totalprice" title="总金额" cell="number" format="###,###,##0.00" calc="total" calcTitle= "汇总:"/>4.4 i18N
在Web.xml里面指定i18N的Properties文件
<context-param> <param-name>extremecomponentsMessagesLocation</param-name> <param-value>messages</param-value></context-param><ec:column property="name" title="book.name"/>4.5数据库分页
EC默认从数据库中查找所有记录然后由它来分页,如果查询结果较大,可以考虑使用数据库端分页的方案。
此时,EC会使用Limit对象向Controller传递PageNo,PageSize,OrderBy等分页信息。而服务端将向EC返回总记录数和当前页的内容,具体请参看 BookController。
4.6不显示导出excel及分页
最快的方式是设置table的showStatusBar= false
<ec:table items= "order.orderItems"var="item" action="" showStatusBar= "false"> 4.7ImagePath
旧版EC包括其文档都在每个table tag里定义ImagePath, 新版已经可以自动插入ContextPath,只需在properties文件定义table.imagePath=/images/table/*.gif即可
5.自定义及扩展
ExtremeTable比Display Tag的i一个就是良好的自定义和扩展能力,不用千人一面。
不过,人总是懒的,虽然扩展子类很容易,但能不扩展就还是不可扩展了。幸亏用Compact View再改改CSS一般就能达到要求。
5.1. 良好的CSS定义
ExtremeTable 的CSS定义非常严谨, 并且提供很多个层次的修改方式:
1.直接修改css文件, 可以把table view改成任意样式
2.修改全局属性, 改变某种元素对应的css class名
table.styleClass=tableRegion 3.在某个页面的row,column tag中定义class
<ec:row style="" or styleClass=""/> SpringSide采用层次1, 直接修改extremecomponents.css为合适的样式
5.2方便的<tr><td>属性扩展
row与column已提供了丰富的普通属性与 javascript属性如onClick(), 如果属性仍然未够,可自行扩展<row>与<column>tag ,并通过全局属性指定新的子类名。
为了方便大家在子类扩展属性, extreme Table提供了专门的回调函数与Util函数如
public void addColumnAttributes(Column column) { column.addAttribute("customAttributeOne", customAttributeOne);} 详细请看手册,Table, Row,Column都提供相同的扩展:
http://extremecomponents.org/wiki/index.php/Column#Extended_Attributes
如果不是Extremetable的特别支持, 普通taglib class要扩展属性的话:
1.定义真正的Java属性,setter,getter
2. tld文件中声明新的属性
3.重载输出函数将新属性打印出来
5.3 扩展HTMLView,cell 等显示组件
Extreme Table在这些类的扩展上放便很多,但这个版本里我还没有进行尝试,就不写了。请自行参考官方文档:http://extremecomponents.org/wiki/index.php/Html_View_Tutorial .
Home Page:http://www.extremecomponents.org
Extreme Table是最功能强大而又容易配置,扩展,自定义的Table 控件。
最紧要的功能包括排序, 分页, 导出Excel, pdf和汇总。
springside的best 示例代码在: listBook.jsp和listOrder.jsp.
基础读物:
1. ExtremeTable自带的文档 .
2.Luck翻译的ExtremeTable官方文档中文版
1. 安装
1.1 安装原始版本
1. 从http://www.extremecomponents.org 下载最新版
2.把extremecomponents.jar 放入web-inf/lib
3.根据minum, 导出excel 或 导出pdf的需要,把/lib下的jar copy到web-inf/lib
4.把images里的图片放入web的任意目录
5.把css文件放到web的任意目录
6.在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,把它复制到WEB-INF/classes里面并进行修改.
7.修改web.xml (见2)。
0.2 复制SpringSide的样式
1.Copy springside的Table Head的图,查。
2.将springside中的修改版extremecomponents.css文件放入任意目录
3.把/src/resource/extremetable.properties 复制到对应目录
0.3 使用Compact View很重要
默认的式样不符合大家的审美,幸亏还有Compact View和css设置,让我们可以敬谢不敏它号称非常方便的HtmlView子类扩展。
1. 在全局设置里
table.view.html=org.extremecomponents.table.view.CompactView 2.把images里/table/compact/*.gif copy 到 /table
2.全局属性配置
ExtremeTable支持在properties文件里方便的统一配置丰富的全局属性
在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,把它复制到WEB-INF/classes里面.
在web.xml里面增加
<context-param> <param-name>extremecomponentsPreferencesLocation</param-name> <param-value>/extremetable.properties</param-value> </context-param>一般只写需要修改的文件:
table.filterable=falsetable.imagePath=/images/table/*.giftable.locale=zh_CNtable.view.html=org.extremecomponents.table.view.CompactViewrow.highlightRow=truecolumn.format.date=yyyy-MM-ddcolumn.format.currency=###,###,###,###,#00.003.导出Excel
注意Excel 导出的Tag已改为,且官方版不支持中文文件名。
<ec:exportXls fileName="BookList.xls" tooltip="导出 Excel"/>在web.xml必须加入:
<filter> <filter-name>eXtremeExport</filter-name> <filter-class>org.extremecomponents.table.filter.ExportFilter</filter-class> </filter> <filter-mapping> <filter-name>eXtremeExport</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ExtremeTable导出的一项重要特性是可以根据不同的View导出不同的列.
比如html管理界面可能只列出订单几个最重要的列,而导出excel时则需要导出所有的列。
<ec:column property="orderdate" title="订单日期" cell="date" format="yyyy-MM-dd" viewsDenied= "html"/>又比如有些操作按纽的列只想在html出现,excel里不想出现:
<ec:column property="orderdate" title="订单日期" viewAllowed= "html"/> 以上订单日期列在html view看不到,而excel,pdf view可以见到.
而"编辑图标","选择Checkbox"这些管理界面上的列,也可以设置不export到pdf,excel view
4.其他要点
4.1. 使用排序功能时,如果property为嵌套属性时,需要设置alias
因为javascript的关系.
<ec:column property="customer.name" title="客户名称" alias="customer"/>4.2. Date Cell与NumberCell 和RowCountCell
在全局属性定义:
column.format.date= yyyy-MM-ddcolumn.format.currency= ¥###,###,#00.00<ec:column property="totalprice" title="总金额" cell="currency" width="80" /><ec:column property="shipdate" title="发货日期" cell="date" width= "80"/><e其中RowCountCell用于显示序号。
4.3. 汇总
在column中加入两个cac属性,就会自动在table的底端显示汇总
<ec:column property="totalprice" title="总金额" cell="number" format="###,###,##0.00" calc="total" calcTitle= "汇总:"/>4.4 i18N
在Web.xml里面指定i18N的Properties文件
<context-param> <param-name>extremecomponentsMessagesLocation</param-name> <param-value>messages</param-value></context-param><ec:column property="name" title="book.name"/>4.5数据库分页
EC默认从数据库中查找所有记录然后由它来分页,如果查询结果较大,可以考虑使用数据库端分页的方案。
此时,EC会使用Limit对象向Controller传递PageNo,PageSize,OrderBy等分页信息。而服务端将向EC返回总记录数和当前页的内容,具体请参看 BookController。
4.6不显示导出excel及分页
最快的方式是设置table的showStatusBar= false
<ec:table items= "order.orderItems"var="item" action="" showStatusBar= "false"> 4.7ImagePath
旧版EC包括其文档都在每个table tag里定义ImagePath, 新版已经可以自动插入ContextPath,只需在properties文件定义table.imagePath=/images/table/*.gif即可
5.自定义及扩展
ExtremeTable比Display Tag的i一个就是良好的自定义和扩展能力,不用千人一面。
不过,人总是懒的,虽然扩展子类很容易,但能不扩展就还是不可扩展了。幸亏用Compact View再改改CSS一般就能达到要求。
5.1. 良好的CSS定义
ExtremeTable 的CSS定义非常严谨, 并且提供很多个层次的修改方式:
1.直接修改css文件, 可以把table view改成任意样式
2.修改全局属性, 改变某种元素对应的css class名
table.styleClass=tableRegion 3.在某个页面的row,column tag中定义class
<ec:row style="" or styleClass=""/> SpringSide采用层次1, 直接修改extremecomponents.css为合适的样式
5.2方便的<tr><td>属性扩展
row与column已提供了丰富的普通属性与 javascript属性如onClick(), 如果属性仍然未够,可自行扩展<row>与<column>tag ,并通过全局属性指定新的子类名。
为了方便大家在子类扩展属性, extreme Table提供了专门的回调函数与Util函数如
public void addColumnAttributes(Column column) { column.addAttribute("customAttributeOne", customAttributeOne);} 详细请看手册,Table, Row,Column都提供相同的扩展:
http://extremecomponents.org/wiki/index.php/Column#Extended_Attributes
如果不是Extremetable的特别支持, 普通taglib class要扩展属性的话:
1.定义真正的Java属性,setter,getter
2. tld文件中声明新的属性
3.重载输出函数将新属性打印出来
5.3 扩展HTMLView,cell 等显示组件
Extreme Table在这些类的扩展上放便很多,但这个版本里我还没有进行尝试,就不写了。请自行参考官方文档:http://extremecomponents.org/wiki/index.php/Html_View_Tutorial .
发表评论
-
中文路径不能解析问题解决
2009-10-21 16:41 1405错误代码: 500 Internal Server Error ... -
揭开正则表达式的神秘面纱
2008-12-26 13:42 859揭开正则表达式的神秘 ... -
js 保留两位小数
2008-10-27 14:43 3561function fomatFloat(src,pos){ ... -
java 四则运算类
2008-09-02 10:04 1772运算类:来自网络 -
ie ff div 滚动
2008-09-01 16:54 1034兼容ie firefox的div滚动代码,找了好久才找到,收藏 ... -
iframe auto height
2008-08-05 12:17 1853<script type="text/java ... -
给iframe传值
2008-07-18 14:53 2575<iframe id=theID name=th ... -
java 文字宽
2008-07-09 17:15 11231. Font font=new Font(" ... -
56本管理精粹书
2008-07-08 17:25 786http://www.blogjava.net/MEYE/de ... -
ie与firefox下的css,javascript不同之处
2008-07-08 17:00 2086http://www.programbbs.com/doc/5 ... -
java 全屏显示
2008-07-08 15:17 1307转载http://www.bitscn.com/java/mo ... -
extremetable
2008-06-27 13:12 18270.概述 Home Page:http://www. ... -
缩略图代码
2008-06-12 16:11 967在任何一个综合性网站,我们往往需要上传一些图片资料。但随着高分 ... -
agile java
2008-06-11 22:26 2183学习敏捷开发 1. agile java 2. Agile ... -
滚动窗口js
2008-06-11 08:58 1698<script type="text/java ... -
JavaScript获取元素在浏览器画布中的绝对位置
2008-06-10 12:37 4242JavaScript中提供获取HTML元素位置的属性: HT ... -
Recommended Resources
2008-06-08 10:21 625Agile Modeling http://www.agile ... -
<input type="file"/>只读问题
2008-06-05 14:06 1504加入属性 UNSELECTABLE='on' -
eclipse set
2008-06-02 13:07 898-Xms128M -Xmx512M -XX PermSize= ... -
Ext简介
2008-05-30 09:17 1095无论你是Ext库的新手, ...
相关推荐
"vim table plugin" 提到的就是一个专门用于处理表格的 Vim 插件,它可以让你在 Vim 中像在 Emacs 中使用 table 模式那样,方便地创建、编辑和格式化表格。 这个插件的主要功能包括: 1. **表格创建**:允许用户...
总的来说,"tableExport.jquery.plugin-1.10.22.zip"是前端开发中一个便捷的工具,它通过jQuery实现了表格数据的快速导出,提升了用户体验,简化了开发者的工作。无论是在企业级应用还是个人项目中,都能看到其广泛...
npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-antd' import 'vxe-table-plugin-antd/...
tableExport.jquery.plugin-master能够将这些数据导出为多种格式,如CSV(逗号分隔值)、Excel(.xlsx)、PDF等,方便用户在不同的场景下使用和处理这些数据。 在压缩包"tableExport.jquery.plugin-master"中,可能...
tableExport.jquery.plugin 将HTML表格导出到 CSV DOC JSON格式 PDF格式 PNG SQL 硅通Kong 文本 XLS(Excel 2000 HTML格式) XLSX(Excel 2007 Office Open XML格式) XML(Excel 2003 XML电子表格格式) XML...
原生javascript表格插件,可以拖动改变大小,合并单元格等 Demo 安装 npm install npm run dev ...t.CreateFromString('<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>',document.bo
npm install vxe-table@next vxe-table-plugin-element@next element-plus // ... import VXETable from 'vxe-table' import VXETablePluginElement from 'vxe-table-plugin-element' import 'vxe-table-plugin-...
表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本
在`tableExport.jquery.plugin-master`这个压缩包中,可能包含了`tableExport`插件的源代码和其他相关资源。你可以通过查看和修改源代码,确保在导出PDF时正确处理中文字符。同时,查阅插件文档和相关示例,以获取更...
vxe-table-plugin-menus 基于 的表格插件,提供实用的快捷菜单集 Installing npm install xe-utils vxe-table@next vxe-table-plugin-menus@next // ... import VXETable from 'vxe-table' import ...
《vxe-table:Vue表格解决方案详解》 在前端开发领域,数据展示是不可或缺的一部分,而表格作为数据展示的重要载体,其灵活性和可扩展性尤为重要。vxe-table是一款基于Vue.js框架的高性能表格组件,它提供了丰富的...
因此最后选择了hhurz的JQuery Plugin来实现表格的导出功能。 可以从下面的地址下载TableExport插件;该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF格式,支持的导出格式...
Flexigrid是一款基于jQuery的表格插件,专为创建功能丰富的、可自定义的网格视图而设计。这款插件提供了强大的数据展示能力,适用于处理大量数据并需要进行排序、分页、搜索和操作的数据表格。在网页开发中,...
15. **滚动HTML表格**:对于长表格,Scrollable HTML table plugin提供了滚动功能,使得用户可以更方便地查看和操作表格内容。 以上这些JS工具和资源都是提高网页交互性和用户体验的有效手段,开发者可以根据项目...
在MySQL数据库系统中,"Table mysql.plugin doesn’t exist" 是一个常见的错误,通常与系统启动时无法找到必要的系统表有关。这个错误发生的原因是MySQL在初始化过程中无法定位到`mysql`库中的`plugin`表,该表存储...
tableExport 中文修正+jqgrid修正 表格导出插件,本插件在前人修正的基础上针对几个问题进行了修改,20170722修正以下问题:1.解决jqgrid无法获取表头问题;2.jqgrid开头有一空行问题;3.部分格式导出无扩展名问题;4....
文章中提到的错误提示“Table mysql.plugin doesn't exist”通常出现在MySQL数据库初始化和配置过程中。本文将详细解释这个问题出现的原因,以及如何通过具体步骤解决它。 首先,我们来看看这个问题出现的背景。在...