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 >
<a href="#" onclick="getSelections()">选择项的id</a>
<a href="#" onclick="clearSelections()">取消选择</a>
</div>
<table ></table>
</body>
</html>