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>
评论