jquery easyUI分页dataGrid-Json
生活随笔
收集整理的這篇文章主要介紹了
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
總結
以上是生活随笔為你收集整理的jquery easyUI分页dataGrid-Json的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 正确使用Windows Azure 中的
- 下一篇： AIR配置文件详解