easyui datagrid 的数据加载

最新推荐文章于 2024-05-09 21:06:53 发布

pete熊

最新推荐文章于 2024-05-09 21:06:53 发布

阅读量8.9k

点赞数 1

分类专栏： jquery 文章标签： datagrid javascript url function dao object

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

转载自：

http://www.easyui.info/archives/204.html

这篇文章只谈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">

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

加载本地数据方式：

首先要明白“加载本地数据”是个什么概念，这里指的是加载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事件来实现分页：

 
//定义全局变量记录分页信息
 
var oPage = {
 
    pageIndex:1,
 
    pageSize:20
 
};
 
//初始化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) {
 
        //改变oPage的参数值，用于下次查询传给数据层查询指定页码的数据
 
        oPage.pageIndex = pPageIndex;
 
        oPage.pageSize = pPageSize;
 
        //定义查询条件
 
        var queryCondition = {name:"世纪之光"};
 
        //异步获取数据到javascript对象，入参为查询条件和页码信息
 
        var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,oPage);
 
        //使用loadDate方法加载Dao层返回的数据
 
        $('#tt').datagrid('loadData',{"total":oData.page.recordCount,"rows":oData.data});
 
    }
 
});

上面的代码应该很容易看懂了，做出来的分页基本也算正常，不过有一个缺憾，那就是当显示行号的时候，第一页数据是从1-20的话，第二页数据的行号还会保持1-20，同时这些编码似乎也不怎么便捷。

之前我写过jQuery easyui datagrid 非URL后台分页的文章，稍微对easyui datagrid做下扩展，增加一个doPagination事件，那么编码就较为简单了，而且行号不正确的问题也就顺便解决了。

 
//定义全局变量记录分页信息
 
var oPage = {
 
    pageIndex:1,
 
    pageSize:20
 
};
 
//初始化dategrid
 
$('#tt').datagrid({
 
    url:null,
 
    pagination:true,
 
    pageSize:20,
 
    pageNumber:1,
 
    rownumbers:true,
 
    doPagination:function(pPageIndex, pPageSize) {
 
        //改变oPage的参数值，用于下次查询传给数据层查询指定页码的数据
 
        oPage.pageIndex = pPageIndex;
 
        oPage.pageSize = pPageSize;
 
        //定义查询条件
 
        var queryCondition = {name:"世纪之光"};
 
        //异步获取数据到javascript对象，入参为查询条件和页码信息
 
        var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,oPage);
 
        //使用loadDate方法加载Dao层返回的数据
 
        $('#tt').datagrid('loadData',{"total":oData.page.recordCount,"rows":oData.data});
 
    },
 
});

这种方式就不用再去获取Pagination对象了，编码变得简易了，同时还解决了页码显示不正确的问题。

加载中效果：

easyui datagrid只有在使用url方式获取数据的时候才会显示“加载中……”的遮罩效果，使用loadDate方法加载数据的话，其实也可以用上这效果，只不过稍微麻烦些：

 
//定义全局变量记录分页信息
 
var oPage = {
 
    pageIndex:1,
 
    pageSize:20
 
};
 
//初始化dategrid
 
$('#tt').datagrid({
 
    url:null,
 
    pagination:true,
 
    pageSize:20,
 
    pageNumber:1,
 
    rownumbers:true,
 
    doPagination:function(pPageIndex, pPageSize) {
 
        //改变oPage的参数值，用于下次查询传给数据层查询指定页码的数据
 
        oPage.pageIndex = pPageIndex;
 
        oPage.pageSize = pPageSize;
 
        Exec_Wait('tt','loadDateGrid()');
 
    },
 
});
 
function loadDateGrid(){
 
    //定义查询条件
 
    var queryCondition = {name:"世纪之光"};
 
    //异步获取数据到javascript对象，入参为查询条件和页码信息
 
    var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,oPage);
 
    //使用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');
 
    }
 
});