再次談談easyui datagrid 的數據加載

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

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

url方式加載數據

調用方式

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

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

$('#test').datagrid({
    url:'datagrid_data2.json'
});

相關方法

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數據對象，這個對象包含兩個屬性，一個是記錄總數，一個是當前頁碼的對象數組。例如：

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

如何分頁

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

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

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

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

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

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

加載中效果

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

//初始化dategrid
$('#tt').datagrid({
    url:null,
    pagination:true,
    pageSize:20,
    pageNumber:1,
    rownumbers:true,
    doPagination:function(pPageIndex, pPageSize) {
        //改變opts.pageNumber和opts.pageSize的參數值，用於下次查詢傳給數據層查詢指定頁碼的數據
        var gridOpts = $('#tt').datagrid('options');
        gridOpts.pageNumber = pPageIndex;
        gridOpts.pageSize = pPageSize;
        Exec_Wait('tt','loadDateGrid()');
    },
});
function loadDateGrid(){
    var gridOpts = $('#tt').datagrid('options');
    //定義查詢條件
    var queryCondition = {name:"世紀之光"};
    //異步獲取數據到javascript對象，入參爲查詢條件和頁碼信息
    var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
    //使用loadDate方法加載Dao層返回的數據
    $('#tt').datagrid('loadData',{"total" :
oData.page.recordCount,"rows" : oData.data});
}

/**
 * 封裝一個公用的方法
 * @param {Object} grid table的id
 * @param {Object} func 獲取異步數據的方法
 * @param {Object} time 延時執行時間
 */
function Exec_Wait(grid,func,time){
    var dalayTime = 500;
    __func_=func;
    __selector_ = '#' + grid;
    $(__selector_).datagrid("loading");
    if (time) {
        dalayTime = time;
    }
    gTimeout=window.setTimeout(_Exec_Wait_,dalayTime);
}
function _Exec_Wait_(){
    try{eval(__func_);
    }catch(e){
        alert("__func_:" + __func_ + ";_ExecWait_" + e.message);
    }finally{
        window.clearTimeout(gTimeout);
        $(__selector_).datagrid("loaded");
    }
}

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

function loadDateGrid(){
    $('#tt').datagrid('loading');//打開等待div
    var queryCondition = {
        name: "世紀之光"
    };
    var oData = getAjaxDate("orderManageBuz", "qryWorkOrderPaged", queryCondition, oPage);
    $('#tt').datagrid('loadData', {
        "total": oData.page.recordCount,
        "rows": oData.data
    });
}

$('#tt').datagrid({
    onLoadSuccess: function(){
        //加載完數據關閉等待的div
        $('#tt').datagrid('loaded');
    }
});

如何不統計總數

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

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

返回

作者: 世紀之光

• 該日誌由 世紀之光 於3年前發表在datagrid分類下
• 轉載請註明: 再次談談easyui datagrid 的數據加載 | WebUI框架使用參考 +複製鏈接
• 關鍵字: datagrid分頁, loadDate, url