• 1url方式加載數據
  • 1.1調用方式
  • 1.2相關方法
  • 1.3二次加載問題
• 2加載本地數據方式
  • 2.1調用方式
  • 2.2如何分頁
  • 2.3加載中效果
  • 2.4如何不統計總數

這篇文章只談jQuery easyui datagrid 的數據加載，因為這也是大家談論最多的內容。其實easyui datagrid加載數據只有兩種方式：一種是ajax加載目標url返回的json數據；另一種是加載js對象，也就是使用loadDate方法。

這裏就自己的使用經驗，對兩種方式做簡單總結和歸納，並且對使用過程中容易產生的誤區做較為詳細的描述，希望能對大家有所幫助。

url方式加載數據

調用方式

目前可能大多數人都是選擇這種方式，因為跟流行的框架結合的也比較好，使用url的話，可以將url寫在DOM裏面或者申明datagrid對象的url屬性，以下兩種方式都是可以的：

1. <table id="tt" style="width:700px;height:auto" title="DataGrid" idField="itemid" url="datagrid_data2.json">

1. $(‘#test‘).datagrid({
2. url:‘datagrid_data2.json‘
3. });

相關方法

二次加載問題

對於使用url方式的初學者，經常碰到重復請求的問題，這個問題的根源是多次渲染組件

• 使用load和reload函數去動態加載數據，而不是選擇再次渲染組件。很多人再次渲染組件的目的僅僅是為了設置url，這得不償失，url的設置可以通過options方法獲取到組件實例的opts，然後在給opts.url重新賦值即可；
• class方式註冊組件和javascript註冊方式不要同時使用。class註冊方式一般是為了初始化屬性，javascript方式則屬性和事件都可初始化，但是不管是class方式還是javascipt方式註冊組件，每次註冊，只要被設置過url屬性就會做請求。所以在不可避免要使用javascript方式註冊的情況下，索性就不要使用class方式註冊了。

因為url方式網上的資料特別多，我這裏就簡述這麽多，下面重點討論一下loadDate方式加載數據。

加載本地數據方式

首先要明白“加載本地數據”是個什麽概念，這裏指的是加載javascript對象數據，而javascript數據對象顯然可以使是通過其它異步方式獲得的，所以這個“加載本地數據”的描述並不準確。

調用方式

先要將url屬性設置為null，或者不設置，然後使用datagrid的loadDate方法加載js數據對象，這個對象包含兩個屬性，一個是記錄總數，一個是當前頁碼的對象數組。例如：

1. var obj = {‘total‘:100,‘rows‘:[{id:‘1‘,name:‘一‘},{id:‘2‘,name:‘二‘}]};
2. $(‘#tt‘).datagrid(‘loadData‘,obj);

如何分頁

不對源碼做任何改動的話，可以首先獲取datagrid的Pagination對象，然後通過寫Pagination對象的onSelectPage事件來實現分頁：

1. //初始化dategrid
2. $(‘#tt‘).datagrid({
3. url:null,
4. pagination:true,
5. pageSize:20,
6. pageNumber:1,
7. rownumbers:true
8. });
9. $(‘#tt‘).datagrid(‘getPager‘).pagination({
10. displayMsg:‘當前顯示從 [{from}] 到 [{to}] 共[{total}]條記錄‘,
11. onSelectPage : function(pPageIndex, pPageSize) {
12. //改變opts.pageNumber和opts.pageSize的參數值，用於下次查詢傳給數據層查詢指定頁碼的數據
13. var gridOpts = $(‘#tt‘).datagrid(‘options‘);
14. gridOpts.pageNumber = pPageIndex;
15. gridOpts.pageSize = pPageSize;
16. //定義查詢條件
17. var queryCondition = {name:"世紀之光"};
18. //異步獲取數據到javascript對象，入參為查詢條件和頁碼信息
19. var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
20. //使用loadDate方法加載Dao層返回的數據
21. $(‘#tt‘).datagrid(‘loadData‘,{"total" : oData.page.recordCount,"rows" : oData.data});
22. }
23. });

上面的代碼應該很容易看懂了，做出來的分頁基本也算正常，唯一的缺憾就是寫起來不怎麽便捷。那麽如何才能便捷地實現分頁呢？

之前我寫過jQuery easyui datagrid 非URL後臺分頁的文章，稍微對easyui datagrid做下擴展，增加一個doPagination事件，那麽編碼就較為簡單了。

1. //初始化dategrid
2. $(‘#tt‘).datagrid({
3. url:null,
4. pagination:true,
5. pageSize:20,
6. pageNumber:1,
7. rownumbers:true,
8. doPagination:function(pPageIndex, pPageSize) {
9. var gridOpts = $(‘#tt‘).datagrid(‘options‘);
10. //定義查詢條件
11. var queryCondition = {name:"世紀之光"};
12. //異步獲取數據到javascript對象，入參為查詢條件和頁碼信息
13. var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,{pageNumber:gridOpts.pageNumber,pageSize:gridOpts.pageSize});
14. //使用loadDate方法加載Dao層返回的數據
15. $(‘#tt‘).datagrid(‘loadData‘,{"total" : oData.page.recordCount,"rows" : oData.data});
16. },
17. });

這種方式就不用再去獲取Pagination對象了，而且也不用設置opts的pageNumber和pageSize這兩個屬性了，編碼變得簡易了，是不是變得清爽了很多呢？

加載中效果

easyui datagrid只有在使用url方式獲取數據的時候才會顯示“加載中……”的遮罩效果，使用loadDate方法加載數據的話，其實也可以用上這效果，只不過稍微麻煩些：

1. //初始化dategrid
2. $(‘#tt‘).datagrid({
3. url:null,
4. pagination:true,
5. pageSize:20,
6. pageNumber:1,
7. rownumbers:true,
8. doPagination:function(pPageIndex, pPageSize) {
9. //改變opts.pageNumber和opts.pageSize的參數值，用於下次查詢傳給數據層查詢指定頁碼的數據
10. var gridOpts = $(‘#tt‘).datagrid(‘options‘);
11. gridOpts.pageNumber = pPageIndex;
12. gridOpts.pageSize = pPageSize;
13. Exec_Wait(‘tt‘,‘loadDateGrid()‘);
14. },
15. });
16. function loadDateGrid(){
17. var gridOpts = $(‘#tt‘).datagrid(‘options‘);
18. //定義查詢條件
19. var queryCondition = {name:"世紀之光"};
20. //異步獲取數據到javascript對象，入參為查詢條件和頁碼信息
21. var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
22. //使用loadDate方法加載Dao層返回的數據
23. $(‘#tt‘).datagrid(‘loadData‘,{"total" : oData.page.recordCount,"rows" : oData.data});
24. }
26. /**
27. * 封裝一個公用的方法
28. * @param {Object} grid table的id
29. * @param {Object} func 獲取異步數據的方法
30. * @param {Object} time 延時執行時間
31. */
32. function Exec_Wait(grid,func,time){
33. var dalayTime = 500;
34. __func_=func;
35. __selector_ = ‘#‘ + grid;
36. $(__selector_).datagrid("loading");
37. if (time) {
38. dalayTime = time;
39. }
40. gTimeout=window.setTimeout(_Exec_Wait_,dalayTime);
41. }
42. function _Exec_Wait_(){
43. try{eval(__func_);
44. }catch(e){
45. alert("__func_:" + __func_ + ";_ExecWait_" + e.message);
46. }finally{
47. window.clearTimeout(gTimeout);
48. $(__selector_).datagrid("loaded");
49. }
50. }

當然了，你也可以利用datagrid的onLoadSuccess事件來實現，反正最終都是調用datagrid的loding和loaded方法完成等待DIV的顯示和隱藏的：

1. function loadDateGrid(){
2. $(‘#tt‘).datagrid(‘loading‘);//打開等待div
3. var queryCondition = {
4. name: "世紀之光"
5. };
6. var oData = getAjaxDate("orderManageBuz", "qryWorkOrderPaged", queryCondition, oPage);
7. $(‘#tt‘).datagrid(‘loadData‘, {
8. "total": oData.page.recordCount,
9. "rows": oData.data
10. });
11. }
13. $(‘#tt‘).datagrid({
14. onLoadSuccess: function(){
15. //加載完數據關閉等待的div
16. $(‘#tt‘).datagrid(‘loaded‘);
17. }
18. });

如何不統計總數

有時候數據層的數據量特別大，查詢統計總數的話會很耗時，統計總數就顯得不怎麽合適了，如何不統計總數完全看你後臺怎麽寫了，可以虛擬一個一個總數，這個數字總是比當前頁碼大1就行了，具體實現就不在本篇文章關註的範圍內了。

到這裏，loadData方式加載grid數據就已經算是完美了，至少該有的問題均已經解決了，希望大家有更好建議一起交流……

談談easyui datagrid 的數據加載