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>

 

posted on 2011-01-10 14:17  archie2010  阅读(4178)  评论(0)  编辑  收藏  举报