ecside介紹：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ecside是一個開源的列表組件。
他源自著名開源列表組件 eXtremeComponents （http://www.extremecomponents.org），
但現在已經脫離eXtremeComponents,獨立發展（仍有大量代碼來自 eXtremeComponents）。
由於各種協議和各種授權的問題，目前還不能獨立成爲一個開源項目，但“做最實用易用的列表組件”是ecside最終的目標。
作者： fins ( name: Wei Zijun email:[email protected] blog:http://fins.javaeye.com )
(詳見readme.txt)
基礎功能的使用請參考 eXtremeComponents 官方網站(http://www.extremecomponents.org)的wiki（有中文版）
增強的功能簡介：
1 ec:table屬性增加 toolbarLocation
用來控制工具條在上還是在下顯示
可選值 "bottom" "top" "none"（不顯示）
2 ec:table屬性增加 toolbarContent
可自定義工具條顯示那些內容，以及排列順序
默認： toolbarContent="navigation|pagejump|pagesize|export|extend|status"
例子 toolbarContent="pagejump|navigation|export|extend|status"
此時 工具條將不顯示"頁面行數調整"框同時順序也會和默認的發生變化
navigation 導航條
pagejump 頁面跳轉
pagesize 頁面行數設置
export 導出按鈕區
extend 自定義擴展區
status 數據信息區
同時 爲ec:table增加屬性 nearPageNum="數字",
用來設置導航條前後顯示的鄰近頁數,不設置將使用默認值，設置爲0則不顯示鄰近頁
3 ec:table屬性增加 pageSizeList
可用來設置“頁面行數選擇列表”中的具體數值
默認：pageSizeList="10,20,50,100,1000,2000,all"
其中的all爲增加全部顯示功能。
例子 pageSizeList="10,20,50"
此時列表裏將只顯示 10 20 50供選擇
max:數字 特性 :
pageSizeList="max:200,10,15,30,50,100,all"
如果 10--100以及all中，某一項大過了max的200則不在列表中顯示。
也可以只使用pageSizeList="max:200" 此時將使用默認設置，並用max限制。
4 ec:table屬性增加 xlsFileName 和 pdfFileName
用來快捷的實現導出xls文件
如果你只是想使用默認的方式導出 xls 和 pdf文件 不用再使用 ec:exportXls ec:exportPdf標籤了
直接在ec:table裏使用這個屬性就ok.
使用方法 xlsFileName="文件名.xls"
5 ec:table屬性增加 showPrint
顯示打印按鈕，該功能只能在ie 5.5以上瀏覽器中使用沒有使用第三方組件 使用了ie內置組件
使用方法： showPrint="true"
打印按鈕將作爲導出的一種類型而存在
6 ec:table屬性增加 resizeColWidth 和 minColWidth
默認： resizeColWidth="false" minColWidth="20"
用來實現手動調節列寬的功能 在ie 5.5+ 和ff 2.0下測試通過
resizeColWidth="true" 實現列寬調整
minColWidth="20" 調整時列的最小寬度
目前不能和過濾功能一同使用(當filterable="true"時候不可以用)
7 爲ec:row 添加更多的html事件支持，現支持：onmouserover onmouserout onclick ondbclick
8 爲ec:column 添加更多的html事件支持，現支持：onmouserover onmouserout onclick ondbclick
9 爲ec:table ec:row ec:column 增加了 tagAttributes屬性
該屬性用來爲元素增加一些自定義的html屬性
例如 ec:column 現在並不支持 onmouseup事件
可以通過下面的方式實現
<ec:column tagAttributes="οnmοuseup=/"alert('test mouse up');/" " .......
10 ec:column屬性增加 ellipsis
實現單元格內數據過長的時候 自動截短並加"..."的功能 ie only
因爲ff不支持 text-overflow: ellipsis;
使用 ellipsis="true"
使用時 還要爲ec:table加上 style="table-layout:fixed;" (如果您已經使用了調整列寬功能 則不用添加)
11 ec:column屬性增加 headerSpan
實現表頭的跨列顯示
使用
<ec:column headerSpan="2" ...
<ec:column headerSpan="0" ...
注意當把 一個column 的 headerSpan=設置爲 n的時候
那麼他下面的 n-1個 column 的 headerSpan 一定要爲 0 (這個以後會想辦法修正現在這麼處理太麻煩了)
12 ec:column屬性增加 calcSpan
實現統計行的標題跨列顯示
使用
<ec:column calc="total" calcTitle= "合計" calcSpan="2" ....
13 增加 ec:extendrow 標籤
在列表前/後加一行或多行 取決於你的html代碼怎麼寫因爲這個是絕對自由的 連tr標籤都要自己寫
before="true" (true top false(默認))
當 before="top"的時候 所加行會出現在 列表表頭的上面
這樣你可以做多行表頭了 （但這時候 不支持列寬調整 想支持需要自己做些動作詳見示例文件demo2.jsp）
例如
<ec:extendrow before="true">
<tr>
<td style="background-color:#ffeedd" >*列表前擴展行</td>
<td style="background-color:#ffeedd">可以在這裏加一些自定內容</td>
<td style="background-color:#ffeedd" colspan="2">該行與ectable在同一table內</td>
</tr>
</ec:extendrow>
<ec:extendrow>
<tr>
<td style="background-color:#eeddff"> </td>
<td style="background-color:#eeddff">*列表後擴展行</td>
<td style="background-color:#eeddff">可以在這裏加一些自定內容</td>
<td style="background-color:#eeddff">該行與ectable在同一table內</td>
</tr>
</ec:extendrow>
14 增加 ec:extend 標籤
用來在toolbar內增加一些自定義的html代碼屬性
例如 <ec:extend><a href="#">自定義擴展內容</a></ec:extend>
這時該連接 將會出現在 toolbarContent 中的 extend所在位置
15 增加 ec:extendbar 標籤
在列表前/後加些html代碼 屬性 before="true" (true top false(默認))
如果要加的東西比較多 建議使用這個而不要使用ec:extend
ec:extendbar 添加的內容不會和組件自帶的tool放到一行
當 before="top"的時候 所加內容會出現在 列表和列表標題之間
例如
<ec:extendbar before="true" >
<span style="color:#999999">*工具條 前擴展塊:可以在工具條前加些你自己想加的東西，<b>所加內容和ectable在同一form內</b></span>
</ec:extendbar>
<ec:extendbar>
<span style="color:#999999">*工具條 後擴展塊:可以在工具條後加些你自己想加的東西，<b>所加內容和ectable在同一form內</b></span>
</ec:extendbar>
16 增加了cell類型
複選框 cell="checkbox" headerCell="checkbox"
單選框 cell="radiobox" headerCell="riadiobox"
例如
<ec:column cell="checkbox" headerCell="checkbox"
alias="chkBoxNameXXX" value="chkValue${pre.nickname}"
width="22" viewsAllowed="html" />
注意 value對應生成的 checkBox 的 value ,alias 對應生成的 checkBox 的name
17 增加頁面變量 ${TOTALROWCOUNT} 用來標示當前紀錄在全部記錄中的行數
（${ROWCOUNT}用來標示當前紀錄在當前頁中的行數）
例子
<ec:column property="name" title="姓名" width="160">${TOTALROWCOUNT},${pre.name}</ec:column>
18 增加了“固定列表頭，滾動列表體”(“列表內部滾動條”)的功能
這個功能實現起來比我一開始想像的複雜
不是簡單的使用一個 div overflow:scroll就可以搞定的
雖然功能是支持了但是代碼肯定還有很多bug或者是可以改進的地方
歡迎大家積極的提出寶貴的意見謝謝了
使用方法：
ec:table標籤內增加
listHeight="數字" 屬性 （指定列表體的高度）
同時把要指定 width="數字" 不能省略同時要使用絕對大小 而不要使用百分比
詳見例子:
demo0.jsp
19 增加shadowRow功能
shadowRow我自己瞎起的名字解釋如下：
每行下面可以再加一個子行這個行裏顯示什麼可以由大家自己定義
常見的應用是在有些論壇論壇主題列表裏當你點擊行開頭的小加號的時候 會在這行下面展開一個區域那裏面顯示的是主帖的內容.
我們可以把這個擴展一下利用ajax從後臺去讀取我們想讀取的信息,這樣我們就可以做任何我們想做的事情了)
該功能是不通過標籤或java代碼實現 純js實現。
詳見例子 demo0.jsp （大家一定要注意看demo0.jsp裏的註釋啊 呵呵）
其實有了這個功能，大家已經可以自己比較容易的實現可編輯表格的功能了呵呵過一陣我會發一個例子上來
20 ec:table 增加了 excludeParameters 和 includeParameters 屬性
使用後，ecside將自動排除或保留屬性中所指定的“表單屬性”
這個如果你理解了 autoIncludeParameters 的用處就不難理解這兩個屬性的用處了
注意: excludeParameters 比 includeParameters 有更高的優先級
即 excludeParameters="a" includeParameters ="a" 時 a仍然將被排除
建議儘量使用 excludeParameters 不要使用 includeParameters ，除非你非常明確自己要包含的東西。
includeParameters 使用不當會使你忘記包含一些必須包含的東西.
excludeParameters="表單屬性名稱1,表單屬性名稱2" (表單屬性名稱不能含有半角的逗號)
includeParameters="表單屬性名稱3,表單屬性名稱4"
21 實現了靈活的可定製的“可編輯列表”：
在ec:column 中指定下列屬性：
cellName="這個cell在數據庫中真正對應的列名，省略時則自動使用 property對應的名稱"
cellValue="這個cell在數據庫中真正對應的值"
cellEdit="a1,a2,a3"
a1編輯類型(目前可選input select 其他如radio等還不完善)，
a2對應的模版textarea的ID(默認是 "ec_edit_template_'+編輯類型 ),
a3觸發編輯的事件（默認是ondblclick）
模版爲一段寫在textarea內的表單域的html代碼，書寫是完全自由的但是一定要注意不要缺少必要的事件方法和屬性。
22 增加了 高亮顯示選種行的功能，使用 ec:table屬性: selectlightRow="true"
23 爲ec:table增加了 maxRowsExported="數字" 屬性，用來限制導出大最大條數，
如果數據超過這個數目，則不執行導出操作。
24 實現了cell的映射功能（詳見示例的性別和 角色列）
用法：
<ec:column mappingItem="用來映射的MAP在context內的key" mappingDefaultValue="當找不到映射值時要使用的默認值".../>
例如，在示例中，角色的信息以 “標識--名稱”的形式放到了一個 map內
在action中把這個map放到了 request.setAttribute("USERROLE_MAP", CommonDictionary.USERROLE);內
在頁面使用
<ec:column property="USERROLE" title="角色" mappingItem="USERROLE_MAP" mappingDefaultValue="[錯誤的角色]"/>
就會自動將名稱顯示出來。
25 做了一個簡單的小標籤用來從map生成 select的option列表
<ec:options items="MAP在context內的key" defaultKey="默認選中的option的value" tagAttributes="附加的html屬性"/>
還有很多細節的改動，暫略...
內部變化：
1 提煉了ectable生成的js
ectable 原先的實現會在頁面內生成大量的js代碼非常不好
現在翻頁相關的js代碼全部提煉成了 js函數
2 翻頁按鈕的外觀提煉成由css決定而不是圖片決定。
ectable原版生成的是 <img ... src="圖片路徑" />
現在生成的是 <input type="button" class="樣式" />
這樣要改變外觀只要去修改“樣式” 中的背景圖片就ok了
filter clear 按鈕 暫時還沒有這麼處理
3 ！！！翻頁機制全部使用ajax實現！！！
(沒有使用任何的ajax後臺框架(如dwr ajaxAnywhere)，純js端實現)
filter 排序功能還沒有使用ajax
4 支持 預查詢功能（利用ajax實現）
例如在用戶察看第5 頁數據的時候，系統會偷偷的把 上一頁和下一頁的數據也查出來
並放到隱藏的textarea內 ，翻頁的時候無需再查詢
當然這個功能有利弊，所以是可設置是否開啓
5 將導出excel所使用的組件由poi切換成了 jxl
原因有2
1 jxl這個項目沒有死仍然在繼續發展
2 jxl似乎對內存要求更小
(poi在導出20000條紀錄的時候outofmemery了,jxl則順利完成任務)
jxl官方網址
http://www.andykhan.com/jexcelapi/index.html
6 xls導出方式修改如果瞭解代碼的人一定知道 默認的導出xls時是導出的vo/map裏的原始數值
而不是頁面實際顯示的內容，這個問題現在解決了。
7 代碼進行了較大規模的重構分離出了tool模塊(但這個模塊還不夠靈活下一版本打算在這個基礎上爭強擴展性靈活性)
你可以自己寫tool來取代組件內設的tool
組件默認的 tool 配製在 extremetable.properties 文件內
tool.navigation=org.ecside.tool.PageNavigationTool
tool.pagejump=org.ecside.tool.PageJumpTool
tool.pagesize=org.ecside.tool.PageSizeTool
tool.export=org.ecside.tool.ExportTool
tool.status=org.ecside.tool.StatusTool
tool.extend=org.ecside.tool.ExtendTool
tool.blank=org.ecside.tool.BlankTool
tool.|=org.ecside.tool.SeparatorTool
tool.,=org.ecside.tool.NewLineTool
如果你想實現 自己的導航 可以 繼承抽象類BaseTool
然後修改配製例如
tool.navigation=com.mytest.MyNavigationTool