ET使用文档

ExtremeTable

转自： http://www.springside.org.cn/docs/reference/ExtremeTable.htm

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 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 .