jquery easyUI--dataGrid-Json
2011-1-11 10:52|發(fā)布者: annmax|查看: 3231|評(píng)論: 0
摘要: dataGrid-調(diào)用json的url可以是存放json數(shù)據(jù)的文件也可以是返回json格式數(shù)據(jù)的請(qǐng)求url 后臺(tái) private PagesUser pages; private int page;//使用插件,當(dāng)前頁(yè)碼 //private int rows;//使用插件,每頁(yè)行數(shù),暫不使用 //---- ...
dataGrid-調(diào)用json的url可以是存放json數(shù)據(jù)的文件
也可以是返回json格式數(shù)據(jù)的請(qǐng)求url
后臺(tái)
private Pages<User> pages;
private int page;//使用插件,當(dāng)前頁(yè)碼
//private int rows;//使用插件,每頁(yè)行數(shù),暫不使用
//----------------------
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中取出的數(shù)據(jù)成亂碼
response.setCharacterEncoding("UTF-8");
PrintWriter out=response.getWriter();
//JSONObject純對(duì)象
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,//若后臺(tái)禁用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()">選擇項(xiàng)的id</a>
<a href="#" onclick="clearSelections()">取消選擇</a>
</div>
<table id="test"></table>
</body>
</html> |
|
