最近的任務是挑選一款表格控件,要求大致如下:
- 開源(堅決不能收費,國內老板就好這口,這種想法培養了國內大批伸手黨。);
- 表格列寬度可調整(拖動);
- 列可手動隱藏(是指用戶可以隱藏/顯示指定列);
- 多級表頭 ;
- 多列排序(點擊列名排序);
- 分頁;
現在的表格控件確實特別多,按照要求找了jqGrid、jQuery DataTables、sigmaGrid、EasyUI DataGrid。
其實找例子的時候其實最關心的是:
- server_side(remote)例子;
- json的結構;
- 支持各種事件方法的拓展性,易用性。
server_side就是類Ajax方式,給出指定的url用來獲取json,前后台分離。
json的結構可以通過瀏覽器的Network來發現,或者直接訪問服務端url,得到json格式。
jqGrid
對於jqGrid大家應該不陌生,算是jQueryUI 過渡最平滑的控件,協議也是與jQuery相同,皮膚完全兼容,可以從
ThemeRoller下載,jqGrid demos上功能也比較全,從jqGrid wiki上也可看出書寫方式和jQuery一致,具體需求可以參見demos和wiki。
其中Column Chooser是擴展組件需要/jQGrid/plugins/ui.multiselect.js(參考鏈接:示例,stackoverflow)。
DataTables
DataTables也是一款相當優秀的jQuery表格控件,他的強大之處在於靈活,搜索功能也很亮,但有一點我不太喜歡,屬性,函數名稱都不標准,需要前綴“fn,b,s,aa,i,o”等等。
sigmaGrid
這是一款純javascript的表格插件,功能強大完善,所有功能幾乎完全涵蓋,dom渲染速度也是相當快(超過目前遇到的所有控件),而且她處理前后台交互也很特別,會向后台post一個_gt_json的json,可以用Newtonsoft.Json.Linq.JObject將其轉化為JObject,其中包括PageInfo涉及的所有屬性,不需要判斷動作、處理事件,只需要將需要的值傳給她就可以了,我將這種方式稱為數據驅動。(jqGrid等其他的控件利用事件來控制分頁等行為,稱為事件驅動)。但有一個致命缺點讓人遺憾,2011-6-11后該控件再也沒有更新。測試發現,ie6-8,chrome,firefox都可以正常使用,但IE9,IE10無法顯示數據。
這個套件應該很多人不會陌生,和jqGrid類似,寫法也基本一樣。渲染速度介於sigmaGrid與jqGrid之間。我做過測試500行,21列,大約87K的數據,渲染速度大約(每次不完全相同)為:sigma(250ms)>easyui(360ms)>jqgrid(510ms)。在10萬行時jqGrid會使chrome崩潰,easyui DataGrid加載時間較長,sigmaGrid速度最快。
缺點是源碼是混淆過的,不太便於二次開發(商業版代碼無混淆)。這里多說幾句,免費版是GPL協議,小心污染項目,另外既然是GPL協議就不應該混淆代碼,這點讓人很不明白,或許國產軟件也有其難言之隱吧。如果真要商業使用,商業版還是不錯的,會提供無混淆源碼,和技術支持。
也嘗試過Dojo(豆粥),可惜國內使用量太少,想找個合適的例子,以及json格式都沒有找到,不過IBM developerWorks上有很多大神寫的Dojo文檔,可以參考下。


