[转载]再次谈谈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'

});

二次加载问题

对于使用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数据就已经算是完美了，至少该有的问题均已经解决了，希望大家有更好建议一起交流……

原文地址:http://www.easyui.info/archives/204.html