ExtremeTable
?Author: 江南白衣?
0.概述
??? Home Page:http://www.extremecomponents.org
??? ?Extreme Table是最功能強(qiáng)大而又容易配置,擴(kuò)展,自定義的Table 控件。
???? 最緊要的功能包括排序, 分頁, 導(dǎo)出Excel, pdf和匯總。
???? springside的best 示例代碼在: listBook.jsp和listOrder.jsp.
基礎(chǔ)讀物:?
???? 1. ExtremeTable自帶的文檔 .
???? 2.Luck翻譯的ExtremeTable官方文檔中文版???
1. 安裝
1.1 安裝原始版本
???? 1. 從http://www.extremecomponents.org 下載最新版
???? 2.把extremecomponents.jar 放入web-inf/lib
???? 3.根據(jù)minum, 導(dǎo)出excel 或 導(dǎo)出pdf的需要，把/lib下的jar copy到web-inf/lib
???? 4.把images里的圖片放入web的任意目錄
???? 5.把css文件放到web的任意目錄
???? 6.在/source/org/extremecomponents/table/core目錄找到extremetable.properties文件,把它復(fù)制到WEB-INF/classes里面并進(jìn)行修改.
???? 7.修改web.xml (見2)。
?0.2 復(fù)制SpringSide的樣式
???? 1.Copy springside的Table Head的圖，查。
???? 2.將springside中的修改版extremecomponents.css文件放入任意目錄
???? 3.把/src/resource/extremetable.properties 復(fù)制到對應(yīng)目錄
0.3 使用Compact View很重要
???? 默認(rèn)的式樣不符合大家的審美，幸虧還有Compact View和css設(shè)置，讓我們可以敬謝不敏它號稱非常方便的HtmlView子類擴(kuò)展。
??? 1. 在全局設(shè)置里
table.view.html=org.extremecomponents.table.view.CompactView
??? 2.把images里/table/compact/*.gif copy 到 /table
2.全局屬性配置
?? ExtremeTable支持在properties文件里方便的統(tǒng)一配置豐富的全局屬性
? 在/source/org/extremecomponents/table/core目錄找到extremetable.properties文件,把它復(fù)制到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.導(dǎo)出Excel
????注意Excel 導(dǎo)出的Tag已改為，且官方版不支持中文文件名。
????<ec:exportXls fileName="BookList.xls" tooltip="導(dǎo)出 Excel"/>
??? ?ExtremeTable導(dǎo)出的一項重要特性是可以根據(jù)不同的View導(dǎo)出不同的列.
???? 比如html管理界面可能只列出訂單幾個最重要的列，而導(dǎo)出excel時則需要導(dǎo)出所有的列。
<ec:column property="orderdate" title="訂單日期"? cell="date" format="yyyy-MM-dd"? viewsDenied= "html"/>
???? 以上訂單日期列在html view看不到，而excel,pdf view可以見到.
??? 而"編輯圖標(biāo)"，"選擇Checkbox"這些管理界面上的列，也可以設(shè)置不export到pdf,excel view
4.其他要點
4.1. 使用排序功能時,如果property為嵌套屬性時,需要設(shè)置alias
???????? ?因為javascript的關(guān)系.
<ec:column property="customer.name" title="客戶名稱" alias="customer"/>
4.2. Date Cell與NumberCell
???? 在全局屬性定義:
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="發(fā)貨日期"? cell="date" width= "80"/>
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數(shù)據(jù)庫分頁
?EC默認(rèn)從數(shù)據(jù)庫中查找所有記錄然后由它來分頁，如果查詢結(jié)果較大，可以考慮使用數(shù)據(jù)庫端分頁的方案。
?此時，EC會使用Limit對象向Controller傳遞PageNo,PageSize,OrderBy等分頁信息。而服務(wù)端將向EC返回總記錄數(shù)和當(dāng)前頁的內(nèi)容，具體請參看 BookController。
4.6不顯示導(dǎo)出excel及分頁
最快的方式是設(shè)置table的showStatusBar= false
<ec:table? items= "order.orderItems"var="item"?action=""?? showStatusBar= "false">
??? 4.7ImagePath
? 舊版EC包括其文檔都在每個table tag里定義ImagePath, 新版已經(jīng)可以自動插入ContextPath,只需在properties文件定義table.imagePath=/images/table/*.gif即可
5.自定義及擴(kuò)展
?? ExtremeTable比Display Tag的i一個就是良好的自定義和擴(kuò)展能力，不用千人一面。
?? 不過，人總是懶的，雖然擴(kuò)展子類很容易，但能不擴(kuò)展就還是不可擴(kuò)展了。幸虧用Compact View再改改CSS一般就能達(dá)到要求。
?5.1. 良好的CSS定義
???????? ExtremeTable 的CSS定義非常嚴(yán)謹(jǐn), 并且提供很多個層次的修改方式:
???????? 1.直接修改css文件, 可以把table view改成任意樣式
???????? 2.修改全局屬性, 改變某種元素對應(yīng)的css class名
table.styleClass=tableRegion
???????? 3.在某個頁面的row,column tag中定義class
?<ec:row style="" or styleClass=""/>
??????? SpringSide采用層次1, 直接修改extremecomponents.css為合適的樣式
5.2方便的<tr><td>屬性擴(kuò)展
??????? row與column已提供了豐富的普通屬性與 javascript屬性如onClick(), 如果屬性仍然未夠,可自行擴(kuò)展<row>與<column>tag ，并通過全局屬性指定新的子類名。
???為了方便大家在子類擴(kuò)展屬性, extreme Table提供了專門的回調(diào)函數(shù)與Util函數(shù)如
public void addColumnAttributes(Column column) {
column.addAttribute("customAttributeOne", customAttributeOne);
}
詳細(xì)請看手冊,Table, Row,Column都提供相同的擴(kuò)展:
http://extremecomponents.org/wiki/index.php/Column#Extended_Attributes
如果不是Extremetable的特別支持, 普通taglib class要擴(kuò)展屬性的話:
??????? 1.定義真正的Java屬性,setter,getter
????????2. tld文件中聲明新的屬性
??????? 3.重載輸出函數(shù)將新屬性打印出來
5.3 擴(kuò)展HTMLView,cell 等顯示組件
???? Extreme Table在這些類的擴(kuò)展上放便很多，但這個版本里我還沒有進(jìn)行嘗試，就不寫了。請自行參考官方文檔:http://extremecomponents.org/wiki/index.php/Html_View_Tutorial .