您的位置：首页 > 产品设计 > UI/UE

easyui datagrid 的数据加载

2012-09-04 21:19 344 查看
转载自：

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

这篇文章只谈jQueryeasyuidatagrid的数据加载，因为这也是大家谈论最多的内容。其实easyuidatagrid加载数据只有两种方式：一种是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
});

相关方法：
loadparam加载第一页数据，param将代替默认查询参数，注意的是该方法只适用于url方式.
load方法在datagrid的api文档里面写得很清楚了，该方法是加载第一页数据的，在具体的应用中，这个方法主要用于刷新数据。

因为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
//定义全局变量记录分页信息
2
var
oPage
={
3
pageIndex:1,
4
pageSize:20
5
};
6
//初始化dategrid
7
$(
'#tt'
).datagrid({
8
url:
null
,
9
pagination:
true
,
10
pageSize:20,
11
pageNumber:1,
12
rownumbers:
true
13
});
14
$(
'#tt'
).datagrid(
'getPager'
).pagination({
15
displayMsg:
'当前显示从
[{from}]到[{to}]共[{total}]条记录'
,
16
onSelectPage
:
function
(pPageIndex,
pPageSize){
17
//改变oPage的参数值，用于下次查询传给数据层查询指定页码的数据
18
oPage.pageIndex
=pPageIndex;
19
oPage.pageSize
=pPageSize;
20
//定义查询条件
21
var
queryCondition
={name:
"世纪之光"
};
22
//异步获取数据到javascript对象，入参为查询条件和页码信息
23
var
oData
=getAjaxDate(
"orderManageBuz"
,
"qryWorkOrderPaged"
,queryCondition,oPage);
24
//使用loadDate方法加载Dao层返回的数据
25
$(
'#tt'
).datagrid(
'loadData'
,{
"total"
:oData.page.recordCount,
"rows"
:oData.data});
26
}
27
});
上面的代码应该很容易看懂了，做出来的分页基本也算正常，不过有一个缺憾，那就是当显示行号的时候，第一页数据是从1-20的话，第二页数据的行号还会保持1-20，同时这些编码似乎也不怎么便捷。

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

1
//定义全局变量记录分页信息
2
var
oPage
={
3
pageIndex:1,
4
pageSize:20
5
};
6
//初始化dategrid
7
$(
'#tt'
).datagrid({
8
url:
null
,
9
pagination:
true
,
10
pageSize:20,
11
pageNumber:1,
12
rownumbers:
true
,
13
doPagination:
function
(pPageIndex,
pPageSize){
14
//改变oPage的参数值，用于下次查询传给数据层查询指定页码的数据
15
oPage.pageIndex
=pPageIndex;
16
oPage.pageSize
=pPageSize;
17
//定义查询条件
18
var
queryCondition
={name:
"世纪之光"
};
19
//异步获取数据到javascript对象，入参为查询条件和页码信息
20
var
oData
=getAjaxDate(
"orderManageBuz"
,
"qryWorkOrderPaged"
,queryCondition,oPage);
21
//使用loadDate方法加载Dao层返回的数据
22
$(
'#tt'
).datagrid(
'loadData'
,{
"total"
:oData.page.recordCount,
"rows"
:oData.data});
23
},
24
});
这种方式就不用再去获取Pagination对象了，编码变得简易了，同时还解决了页码显示不正确的问题。

加载中效果：

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

1
//定义全局变量记录分页信息
2
var
oPage
={
3
pageIndex:1,
4
pageSize:20
5
};
6
//初始化dategrid
7
$(
'#tt'
).datagrid({
8
url:
null
,
9
pagination:
true
,
10
pageSize:20,
11
pageNumber:1,
12
rownumbers:
true
,
13
doPagination:
function
(pPageIndex,
pPageSize){
14
//改变oPage的参数值，用于下次查询传给数据层查询指定页码的数据
15
oPage.pageIndex
=pPageIndex;
16
oPage.pageSize
=pPageSize;
17
Exec_Wait(
'tt'
,
'loadDateGrid()'
);
18
},
19
});
20
function
loadDateGrid(){
21
//定义查询条件
22
var
queryCondition
={name:
"世纪之光"
};
23
//异步获取数据到javascript对象，入参为查询条件和页码信息
24
var
oData
=getAjaxDate(
"orderManageBuz"
,
"qryWorkOrderPaged"
,queryCondition,oPage);
25
//使用loadDate方法加载Dao层返回的数据
26
$(
'#tt'
).datagrid(
'loadData'
,{
"total"
:oData.page.recordCount,
"rows"
:oData.data});
27
}
28
29
/**
30
*
封装一个公用的方法
31
*
@param{Object}gridtable的id
32
*
@param{Object}func获取异步数据的方法
33
*
@param{Object}time延时执行时间
34
*/
35
function
Exec_Wait(grid,func,time){
36
var
dalayTime
=500;
37
__func_=func;
38
__selector_
=
'#'
+
grid;
39
$(__selector_).datagrid(
"loading"
);
40
if
(time)
{
41
dalayTime
=time;
42
}
43
gTimeout=window.setTimeout(_Exec_Wait_,dalayTime);
44
}
45
function
_Exec_Wait_(){
46
try
{eval(__func_);
47
}
catch
(e){
48
alert(
"__func_:"
+
__func_+
";_ExecWait_"
+
e.message);
49
}finally{
50
window.clearTimeout(gTimeout);
51
$(__selector_).datagrid(
"loaded"
);
52
}
53
}
当然了，你也可以利用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就行了，具体实现就不在本篇文章关注的范围内了。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航