jquery easyUI分页dataGrid-Json

dataGrid-调用json的url可以是存放json数据的文件

也可以是返回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 >

 

转载于:https://www.cnblogs.com/archie2010/archive/2011/01/10/1931920.html