jquery easyUI--dataGrid-Json
2011-1-11 10:52|发布者: annmax|查看: 3231|评论: 0
摘要: dataGrid-调用json的url可以是存放json数据的文件也可以是返回json格式数据的请求url 后台 private PagesUser pages; private int page;//使用插件,当前页码 //private int rows;//使用插件,每页行数,暂不使用 //---- ...
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> |
|