jquery easyUIページングdataGrid-Json
35876 ワード
DataGrid-jsonを呼び出すurlは、jsonデータを格納するファイルであってもよい
jsonフォーマットデータを返すリクエストurlでもよい
バックグラウンド
フロントエンド
jsonフォーマットデータを返すリクエストurlでもよい
バックグラウンド
private
Pages
<
User
>
pages;
private
int
page;
//
,
//
private int rows;
//
, ,
//
----------------------
public
String ajaxGrid()
throws
Exception{
int
pageNo
=
0
;
if
(page
!=
0
){
pageNo
=
page;
}
pages
=
userDao.getUserByPageNo(pageNo);
HttpServletResponse response
=
(HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
//
, JSON
response.setCharacterEncoding(
"
UTF-8
"
);
PrintWriter out
=
response.getWriter();
//
JSONObject
JSONObject jsonObject
=
new
JSONObject();
jsonObject.put(
"
total
"
, pages.getTotalCount());
jsonObject.put(
"
rows
"
, pages.getPageList());
out.print(jsonObject.toString());
System.out.println(
"
-------
"
+
jsonObject);
return
null
;
}
フロントエンド
<%
@ page language
=
"
java
"
pageEncoding
=
"
utf-8
"
%>
<%
@ include file
=
"
base/baseHead.jsp
"
%>
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
title
>
jQuery EasyUI
</
title
>
<
link
rel
="stylesheet"
type
="text/css"
href
="themes/default/easyui.css"
>
<
link
rel
="stylesheet"
type
="text/css"
href
="themes/icon.css"
>
<
script
type
="text/javascript"
src
="js/jquery-1.4.2.min.js"
></
script
>
<
script
type
="text/javascript"
src
="js/jquery.easyui.min.js"
></
script
>
<
script
>
$(
function
(){
$(
'
#test
'
).datagrid({
//
title:'My Title',
iconCls:
'
icon-save
'
,
width:
600
,
height:
350
,
nowrap:
false
,
striped:
true
,
collapsible:
true
,
url:
'
ajaxGriduser.jspx
'
,
sortName:
'
uid
'
,
sortOrder:
'
desc
'
,
remoteSort:
false
,
idField:
'
uid
'
,
pageNumber:
1
,
pageSize:
5
,
//
pageList,
pageList:[
5
,
10
,
20
,
50
],
frozenColumns:[[
{field:
'
ck
'
,checkbox:
true
},
{title:
'
uid
'
,field:
'
uid
'
,width:
80
,sortable:
true
}
]],
columns:[[
{field:
'
uname
'
,title:
'
Name
'
,width:
120
},
{field:
'
upwd
'
,title:
'
Pwd
'
,width:
120
,rowspan:
2
,sortable:
true
,
sorter:
function
(a,b){
return
(a
>
b
?
1
:
-
1
);
}
},
]],
pagination:
true
,
rownumbers:
true
,
toolbar:[{
id:
'
btnadd
'
,
text:
'
Add
'
,
iconCls:
'
icon-add
'
,
handler:
function
(){
$(
'
#btnsave
'
).linkbutton(
'
enable
'
);
alert(
'
add
'
)
}
},{
id:
'
btncut
'
,
text:
'
Cut
'
,
iconCls:
'
icon-cut
'
,
handler:
function
(){
$(
'
#btnsave
'
).linkbutton(
'
enable
'
);
alert(
'
cut
'
)
}
},
'
-
'
,{
id:
'
btnsave
'
,
text:
'
Save
'
,
disabled:
true
,
iconCls:
'
icon-save
'
,
handler:
function
(){
$(
'
#btnsave
'
).linkbutton(
'
disable
'
);
alert(
'
save
'
)
}
}]
});
var
p
=
$(
'
#test
'
).datagrid(
'
getPager
'
);
if
(p){
$(p).pagination({
onBeforeRefresh:
function
(){
alert(
'
before refresh
'
);
}
});
}
});
function
getSelections(){
var
ids
=
[];
var
rows
=
$(
'
#test
'
).datagrid(
'
getSelections
'
);
for
(
var
i
=
0
;i
<
rows.length;i
++
){
ids.push(rows[i].uid);
}
alert(ids.join(
'
:
'
));
}
function
clearSelections(){
$(
'
#test
'
).datagrid(
'
clearSelections
'
);
}
</
script
>
</
head
>
<
body
>
<
h1
>
DataGrid
</
h1
>
<
div
style
="margin-bottom:10px;"
>
<
a
href
="#"
onclick
="getSelections()"
>
id
</
a
>
<
a
href
="#"
onclick
="clearSelections()"
>
</
a
>
</
div
>
<
table
id
="test"
></
table
>
</
body
>
</
html
>