碼上快樂

相關內容    簡體    繁體

談談easyui datagrid 的數據加載

本文轉載自   查看原文   2018-12-02 17:44   1707    jquery.easyui/ EasyUI
文章目錄

這篇文章只談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. });  
相關方法
load param 加載第一頁數據，param將代替默認查詢參數，注意的是該方法只適用於url方式.
reload param 刷新當前頁數據，與load方法不同的時候reload方法刷新當前頁數據，而load方法會跳到第一頁然后刷新.
options null 獲取datagrid實例的各項參數值，常用的參數有url,pageNumber,pageSize這三個參數在請求數據以及分頁功能中起重要作用.
二次加載問題

對於使用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. }   
  25.   
  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. }   
  12.   
  13. $('#tt').datagrid({   
  14.     onLoadSuccess: function(){   
  15.         //加載完數據關閉等待的div   
  16.         $('#tt').datagrid('loaded');   
  17.     }   
  18. });  
如何不統計總數

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

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

 
******轉載：http://www.easyui.info/archives/204.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 談談easyui datagrid 的數據加載(轉) 再次談談easyui datagrid 的數據加載 EasyUI datagrid 數據加載 easyui datagrid 加載本地數據 jQuery easyui datagrid 的數據加載 easyui datagrid加載數據和分頁 easyui datagrid 的數據加載Json數據 EasyUI datagrid動態加載json數據 EasyUI datagrid動態加載json數據 easyui datagrid加載數據的三種方式
 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM