extremetable

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=false
table.imagePath=/images/table/*.gif
table.locale=zh_CN
table.view.html=org.extremecomponents.table.view.CompactView
row.highlightRow=true
column.format.date=yyyy-MM-dd
column.format.currency=###,###,###,###,#00.00

3.导出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-dd
column.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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值