关于Jquery EasyUI中的DataGrid服务器端分页随记

浏览数：414 / 时间：2015年06月09日

一、关于DataGrid的分页和排序参数

对于分页参数不需要用户指定，程序在AJAX请求的时候会带上分页和排序需要的参数

每页显示条数：rows

当前页：page

排序字段：sort 【multiSort如果设置为true，则会发送多个排序字段，如：id,time，最新的在最后】

排序类型：order 【multiSort如果设置为true，则会发送多个排序字段排序类型，如：asc,desc，最新的在最后】

二、关于DataGrid传递参数
传递参数可以使用属性：queryParams

形式：queryParams:{ "method": "LogInfoList", "LogName": $.trim($("#LogName").val()), "BeginTime": $.trim($("#BeginTime").val()), "EndTime": $.trim($("#EndTime").val()) }

三、实例代码

<script language="javascript">
        $(function () {
            ListData();
        });

        function ListData() {
            $("#TableGrid").datagrid({
                title: "用户信息表",
                rownumbers: true,
                singleSelect: false,
                url: ‘Handler.ashx‘,
                method: ‘get‘,
                autoRowHeight: false,
                pagination: true,
                pageSize: 20,
                pageList: [20, 30, 50, 80, 100],
                multiSort: true,
                nowrap: true,
                fitColumns: true,
                toolbar: toolbar,
                frozenColumns: [[
                { field: ‘ck‘, width: 80, checkbox: true },
                { field: ‘Id‘, width: 80, hidden: true },
                { field: ‘UserName‘, title: "登录名", width: 150, sortable: true },
                { field: ‘RoleId‘, title: "所属角色", width: 100, sortable: true },
                { field: ‘TrueName‘, title: "真实姓名", width: 100, sortable: true }
            ]],
                columns: [[
                { field: ‘Telphone‘, title: "手机号码", width: 100, sortable: true },
                { field: ‘Email‘, title: "Email", width: 150, sortable: true },
                { field: ‘AddDate‘, title: "日期", width: 200, sortable: true }
            ]],
                onDblClickRow: onDblClickRow
            });
        }

        var toolbar = [{
            text: ‘添加‘,
            iconCls: ‘icon-add‘,
            handler: function () {
                OpenUrl(‘../AdminInfo/Operate.aspx?action=Add‘, ‘添加新用户‘, 600, 400); 
            }
        }, {
            text: ‘批量删除‘,
            iconCls: ‘icon-cut‘,
            handler: function () {
                var row = $("#TableGrid").datagrid(‘getSelected‘);
                if (row) {
                    DelUrl(‘../AdminInfo/Del.aspx‘, row.Id);
                }
            }
        }];

        function onDblClickRow(index) {
            var row = $("#TableGrid").datagrid(‘getSelected‘);
            if (row) {
                OpenUrl(‘../AdminInfo/Operate.aspx?action=Edit&id=‘ + row.Id + ‘‘, ‘编辑用户信息‘, 600, 400);
            }
        }
    </script>

View Code

上面是与服务器端通讯的JS代码

<table id="TableGrid"  width="95%">
    </table>

View Code

html代码非常简单

protected readonly int pageSize = string.IsNullOrEmpty(RequestString.GetRequestQueryString("rows")) ? 0 : Convert.ToInt32(RequestString.GetRequestQueryString("rows"));
    protected readonly int pageIndex = string.IsNullOrEmpty(RequestString.GetRequestQueryString("page")) ? 0 : Convert.ToInt32(RequestString.GetRequestQueryString("page"));
    protected readonly string fidSort = string.IsNullOrEmpty(RequestString.GetRequestQueryString("sort")) ? "Id" : RequestString.GetRequestQueryString("sort");
    protected readonly bool sort = string.IsNullOrEmpty(RequestString.GetRequestQueryString("order")) ? true : RequestString.GetRequestQueryString("order") == "asc" ? false : true;
    
    public void ProcessRequest(HttpContext context)
    {
        context.Response.AddHeader("Content-Type", "text/json; charset=UTF-8");
        int counts = 0;
        
        DataTable dt = pageHelper.Page("AdminInfo", "Id,RoleId,UserName,TrueName,Telphone,Email,AddDate", pageSize, pageIndex, out counts, fidSort, sort, sqlWhere.ToString(), fidSort);

        DataTableToJson(context, counts, dt);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }