jQuery下最好用的Grid控制項是什麼

 發現了Flexigrid，其Ext風格的外觀，簡潔的代碼，

強大的功能都深深地吸引了我。於是就用它了。

雖然它文檔欠缺，有個比較有用的Demo可以參考，

在CodeProject有一篇介紹的文章已經非常細緻了:http://www.codeproject.com/KB/aspnet/MVCFlexigrid.aspx

大家直接存取查看即可。

雖然FlexiGrid的外觀已然不錯，但是灰色的預設風格不大喜歡，所以我把它改成藍色了。

HTML結構導致比較中規中矩的，即每個部分都有單獨的div容器包裹，功能比較獨立也可以通過屬性設定是否顯示，有一點需要注意的就是

表頭和表格實際的內容不在一個容器中，這樣可以達到下拉滾動時表頭固定，而在橫向滾動時同步表頭滾動。

修改CSS過程繁雜而漫長，但最終的效果自己還是非常滿意，這裡就不做分析了，因為真的很多，所以就略過了吧。（代碼統一在下節下載）

先來看看它的功能有哪些吧？官方的功能列表

• Resizable columns  （重設列寬，酷）
• Resizable height and width  （重設表格大小，這個好像實際應用的不多）
• Sortable column headers  (改變列的順序)
• Cool theme （很酷的風格，現在就更酷了）
• Can convert an ordinary table  （可以格式化一個普通的表格）
• Ability to connect to an ajax data source (XML and JSON[new])  （支援多種資料格式）
• Paging （支援分頁）
• Show/hide columns （支援顯示隱藏列） 
• Toolbar (new)  （支援工具列）
• Search (new)  （支援快速檢索）
• Accessible API  （便於使用的API）
• Many more （其他。白搭）

還是和其他控制項一下，第一步來看下參數吧，預設參數比較多，大多的參數都比較有用

02 // 引用預設屬性 

03         p = $.extend({

04             height: 200,//flexigrid外掛程式的高度，單位為px 

05             width:'auto', //寬度值，auto表示根據每列的寬度自動計算，在IE6下建議設定具體值否則會有問題 

06             striped:true, //是否顯示斑紋效果，預設是奇偶互動的形式 

07             novstripe:false,//沒用過這個屬性

08             minwidth: 30,//列的最小寬度 

09             minheight: 80,//列的最小高度 

10             resizable:false, //resizable table是否可伸縮 

11             url:false, //ajax url,ajax方式對應的url地址 

12             method:'POST', // data sending method,資料發送方式 

13             dataType:'json', // type of data loaded,資料載入的類型，xml,json 

14           errormsg:'發生錯誤', //錯誤提升資訊 

15             usepager:false, //是否分頁 

16             nowrap:true, //是否不換行 

17             page: 1,//current page,預設當前頁 

18             total: 1,//total pages,總頁面數 

19             useRp:true, //use the results per page select box,是否可以動態設定每頁顯示的結果數

20             rp: 25,// results per page,每頁預設的結果數 

21             rpOptions: [10, 15, 20, 25, 40, 100],//可選擇設定的每頁結果數 

22             title:false, //是否包含標題 

23             pagestat:'顯示記錄從{from}到{to}，總數 {total} 條',//顯示當前頁和總頁面的樣式 

24             procmsg:'正在處理資料，請稍候 ...',//正在處理的提示資訊 

25             query:'', //搜尋查詢的條件 

26             qtype:'', //搜尋查詢的類別 

27             qop:"Eq", //搜尋的操作符 

28             nomsg:'沒有合格記錄存在',//無結果的提示資訊 

29             minColToggle: 1,//允許顯示的最小列數 

30             showToggleBtn:true, //是否允許顯示隱藏列，該屬性有bug設定成false點擊頭指令碼報錯。 

31             hideOnSubmit:true, //是否在回調時顯示遮蓋 

32             showTableToggleBtn:false, //是否顯示【顯示隱藏Grid】的按鈕  

33             autoload:true, //自動載入，即第一次發起ajax請求 

34             blockOpacity: 0.5,//透明度設定 

35             onToggleCol:false, //當在行之間轉換時，可在此方法中重寫預設實現，基本無用 

36             onChangeSort:false, //當改變排序時，可在此方法中重寫預設實現，自行實現用戶端排序 

37             onSuccess:false, //成功後執行 

38             onSubmit:false, // 調用自訂的計算函數，基本沒用         

39             //Style

40             gridClass:"bbit-grid"//樣式           

41         }, p);

 

另外的兩個屬性colModel，buttons 不是預設屬性，內容說明如下

colModel : 列定義數組  

一個數組，數組的元素說明如下
colModel 參數說明:
display :顯示名稱
必須設定 ,類型:string, 預設值:無
name :欄位名稱
必須設定 ,類型:string,預設值:無
width :寬度
必須設定 , 類型:string ,預設值：無
sortable:是否可排序
類型:boolen , 預設值:false
process:處理常式
類型:function ,可格式化儲存格
hide :是否隱藏
類型: boolen,預設值：false

buttons : 工具列Button定義  

一個數組，數組的元素說明如下
buttons 參數說明:
name :Botton的標識
類型:string , 預設值:無
bclass :樣式
類型:boolen,預設值:無
onpress :當button被點擊時觸發的事件
接受button的name為第一個參數，Grid為第二個參數的一個function
separator :是否分隔字元
和前面四個屬性互斥，當這個屬性設定為True時，輸出一個分隔字元號，不是一個button 預設值:false

參數說明完畢，至於如何使用，那麼請參考文中介紹的那篇文章吧？

雖然Flexigrid已然算是優秀，但是問題還是有？比如：

1：如果在列首添加checkbox列（預設不支援），

2：如何給行附加事件（如右鍵或雙擊）或者在最後列添加操作列？同時擷取該列的資料?

3: 如何能夠相容 jQuery 1.3+?(預設不相容)

4：如何改善效能問題（IE的指令碼執行能力實在是可憐，特別在IE6下，當行列多時，總是有2-3秒的停滯）

5：如何讓某列不參與Toggle？

…………………………

這些我將在下篇分析如何?上述問題.都是我在實際項目中所解決的問題，修改列表

1:修改每次都要擷取記錄數的bug，如果返回的記錄數小於0，即沒有總擷取記錄數，則使用上一次的擷取到的記錄數
2：showToggleBtn 設定為false 時，點擊頭報錯的bug（未修改）
3:修改提示資訊為中文 
4:修改預設樣式，提供藍色皮膚
5：Toolbar中的button增加displayname;
6:快速檢索增加Regex驗證
7:增加選擇列和全選功能 ，修改預設行點擊選中為False。
8:可從外部整合行事件-樣本：整合右鍵功能
9:修改當Jquery升級到1.3.1後的bug
10: 添加Resize方法
11:最佳化Table的動態添加方式
12:修正了Json資料的row為null時指令碼報錯的問題
13 :新增getCheckedRows方法擷取Grid中的選中行，返回是行主鍵的數組 

14: 添加grid擷取Option的方法
15
分頁的樣式略作調整，給按鈕加上title
16
新增列不參與toggle，只需配置列的toggle=false
修改了添加資料的邏輯，提高了效能 60% 左右