EasyUi 分页实现方法

最近项目中使用到EasyUI的前端框架,分页我想基本上没有那个项目能够离开的,

结果今天悲剧的把官方文档翻了一边竟然没找到实例和说明。最终一番Google

最终找到方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//自定义Grid分页数据表
function CreateGridPage(url,feildData){
var title = arguments[2] ? arguments[2] : '数据表格';
var tab = arguments[3] ? arguments[3] : '#tab';
var id = "gidi_"+Math.floor(Math.random()*1000+1);
$(tab).tabs('add',{
id:id,
title:title,
closable:true,
});
CreateGrid(id,url,feildData,title,true);
}
//创建window窗口数据表格
function CreateGridWind(url,feildData,width,heigth){
var id = "gidi_win_"+Math.floor(Math.random()*1000+1);
var title = arguments[4] ? arguments[4] : '数据表格';
$('body').append('<div id="'+id+'"></div>');
$('#'+id).window({
title:title,
width:width,
height:heigth,
modal:true
});
CreateGrid(id,url,feildData,null);
}
//创建带分页的数据表格
function CreateGrid(id,url,feildData,title,pagination){
$('#'+id).datagrid({
title:title,
iconCls:'icon-save',
url:url,
idField:feildData.idField,
singleSelect:true,
striped:true,
rownumbers:true,
pagination:pagination,
fitColumns:true,
loadMsg:'亲~ 正在努力拉取数据中...',
columns:[
feildData.field
]
});
var page = $('#'+id).datagrid('getPager');
$(page).pagination({
showRefresh:false,
beforePageText:'第',
afterPageText:'页 共{pages}页',
displayMsg:'每页 {to} 条 总共 {total} 记录',
onSelectPage:function(num,size){
$('#'+id).datagrid({
queryParams:{
page:num,
size:size
}
});
}
});
}

上面代码是自己写好的两个,一个是创建在tab组件中显示Grid表格,另外一个是创建弹出window窗口中显示Grid表格