談談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數據就已經算是完美了，至少該有的問題均已經解決了，希望大家有更好建議一起交流……

 

 

 

//增加查詢參數，在頁面加載時運行
        function reloadgrid() {
            var test =document.getElementById("NodeChild").innerHTML;
            //查詢參數直接添加在queryParams中
            $('#HaveInput').datagrid({
                url:"ScoresDetailsCity.ashx?test=" + test
            })

            var queryParams =$('#HaveInput').datagrid('options').queryParams;
            getQueryParams(queryParams);
           $('#HaveInput').datagrid('options').queryParams = queryParams;

           $("#HaveInput").datagrid('reload');

        }