ExtremeTable的安裝及配置說明

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 .

 

轉自:http://wyl232.cnblogs.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章