jqgrid 分页 (基于ashx)

1:数据库表创建并往中插入200000条数据:

复制代码

CREATE TABLE [dbo].[T_School](

    [ID] [int] IDENTITY(1,1) NOT NULL,

    [SchoolName] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL,

    [BuildDate] [datetime] NULL,

    [Address] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,

    [IsSenior] [bit] NULL,

    [StudentNum] [int] NULL,

 CONSTRAINT [PK_T_School] PRIMARY KEY CLUSTERED 

(

    [ID] ASC

)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]

) ON [PRIMARY]

复制代码

2:myJqgrid.js封装后的JqGird代码:

复制代码

/*

* 返回json格式中 最好默认带有ID列

  默认显示 20列

* 列表id = "gridTable"

  列表url = 'Handler.ashx?action=page'

  列表datatype = 'json'

  列表colNames = ['ID', "名称", '性别', '手机', '邮箱']

  列表colModel = 。。。

  列表标题 caption = "用户列表"

  列表修改URL editurl = "Handler.ashx?action=oper"

  列表默认排序 sortname = "ID";

  页码ID gridPagerID = "gridPager"

*/

//最后选中的行

var lastsel;

function myJqGrid(id, url, datatype, colNames, colModel, caption, editurl, sortname, gridPagerID) {

    var myGrid = $("#" + id);

    myGrid.jqGrid({

        url: url,

        datastr: "data.json",

        datatype: datatype,

        rowNum: 20,

        rowList: [10, 20, 50],

        colNames: colNames,

        colModel: colModel,

        jsonReader: {

            repeatitems: false,

            root: function (obj) { return obj.rows; },

            page: function (obj) { return obj.pageindex; },

            total: function (obj) { return obj.pagecount; },

            records: function (obj) { return obj.total; }

        },

        prmNames: {

            page: 'PageIndex',

            rows: 'PageSize',

            sort: 'Order',

            order: 'Sort'

        },

        hidegrid: false,

        rownumbers: true,

        loadonce: false,

        sortname: sortname,

        sortorder: 'desc',

        pager: "#" + gridPagerID,

        viewrecords: true,

        caption: caption,

        toolbar: [true, "top"],

        altRows: true,

        //最后选中的行

        onSelectRow: function (id) {

            if (id && id !== lastsel) {

                grid.jqGrid('restoreRow', lastsel);

                lastsel = grid.jqGrid('getRowData', id)[sortname];

            }

        },

        editurl: editurl

    });

}

复制代码

其中要注意这两部分的参数,其中pagecount-json中代表页码总数的数据,total-json中代表数据行总数的数据,pageindex-json中代表当前页码的数据;prmNames则是重命名传到后台的分页参数名称;

传到后台的URL:GET /CountryHandler.ashx?_search=false&nd=1397394772871&PageSize=20&PageIndex=1&Order=ID&Sort=desc

复制代码

        jsonReader: {

            repeatitems: false,

            root: function (obj) { return obj.rows; },

            page: function (obj) { return obj.pageindex; },

            total: function (obj) { return obj.pagecount; },

            records: function (obj) { return obj.total; }

        },

        prmNames: {

            page: 'PageIndex',

            rows: 'PageSize',

            sort: 'Order',

            order: 'Sort'

        },

复制代码

3:Html代码及JS代码:

复制代码

<head runat="server">

    <title></title>

    <link href="css/ui-lightness/jquery-ui-1.10.4.min.css" rel="stylesheet" type="text/css" />

    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>

    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

    <script src="js/myJqgrid.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            showJqGrid();

        });

        function showJqGrid() {

            var id = "gridTable";

            var url = "CountryHandler.ashx";

            var datatype = "json";

            var colNames = ["ID", "名称","地址"];

            var colModel = [

                        { name: "ID", index: "ID"},

                        {

                            name: "SchoolName", index: "SchoolName", 200, align: "center"

                        },

                        {

                            name: "Address", index: "Address", 250, align: "center"

                        }

            ];

            var caption = "学校列表";

            var editurl = "CountryHandler.ashx";

            var sortname = "ID";

            var gridPagerID = "gridPager";

            myJqGrid(id, url, datatype, colNames, colModel, caption, editurl, sortname, gridPagerID);

            //initToolbar(id, gridPagerID);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <table id="gridTable">

    </table>

    <p id="gridPager">

    </p>

    </form>

</body>

</html>

复制代码

4:后台的一般处理文件CountryHandler.ashx代码:

复制代码

using System.Web.Script.Serialization;

using ClassLibrary1;

using DAL;

namespace WebApplication1

{

    /// <summary>

    /// CountryHandler 的摘要说明

    /// </summary>

    public class CountryHandler : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            DAL.TestDbEntities contexts = new TestDbEntities();

            context.Response.ContentType = "text/plain";

            var quey = from School in contexts.T_School select School;

            GridDatas model = new GridDatas();

            int PageIndex= RequstString("PageIndex").Length == 0 ? 1 : int.Parse(RequstString("PageIndex"));

            int PageSize=RequstString("PageSize").Length == 0 ? 20 : int.Parse(RequstString("PageSize"));

            int TotalCount=quey.Count<T_School>();

            model.pagecount = (TotalCount/PageSize).ToString();

            model.pageindex = PageIndex.ToString();

            model.total = TotalCount.ToString();

            model.rows = quey.OrderBy(t=>t.ID).Skip((PageIndex - 1) * PageSize).Take(PageSize).ToList();

            JavaScriptSerializer serializer = new JavaScriptSerializer();

            string Resul = serializer.Serialize(model);

            context.Response.Write(Resul);

        }

        public static string RequstString(string sParam)

        {

            return (HttpContext.Current.Request[sParam] == null ? string.Empty

                : HttpContext.Current.Request[sParam].ToString().Trim());

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

    public class GridDatas

    {

        public string pageindex { set; get; }

        public string pagecount { get; set; }

        public string total { get; set; }

        public List<T_School> rows { get; set; }

    }

}

复制代码

注意:同样借实体类GridDatas来实同JqGrid要求的JSON格式;转化成后的Json代码如下:

复制代码

{"pageindex":"1","pagecount":"10000","total":"200000","rows":[{"RelationshipManager":{},"ID":1,"SchoolName":"中学教育0","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":2,"SchoolName":"中学教育1","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":3,"SchoolName":"中学教育2","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":4,"SchoolName":"中学教育3","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":5,"SchoolName":"中学教育4","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":6,"SchoolName":"中学教育5","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":7,"SchoolName":"中学教育6","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":8,"SchoolName":"中学教育7","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":9,"SchoolName":"中学教育8","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":10,"SchoolName":"中学教育9","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":11,"SchoolName":"中学教育10","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":12,"SchoolName":"中学教育11","BuildDate":"/Date

(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":13,"SchoolName":"中学教育踏浪帅

12","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":355},{"RelationshipManager":{},"ID":14,"SchoolName":"中学教育

13","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":15,"SchoolName":"中学教育

14","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":16,"SchoolName":"中学教育

15","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":17,"SchoolName":"中学教育

16","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":18,"SchoolName":"中学教育

17","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":19,"SchoolName":"中学教育踏

浪帅18","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":20,"SchoolName":"中学教

育19","BuildDate":"/Date(1393940972000)/","Address":"厦门软件园","IsSenior":true,"StudentNum":390}]}

原文地址:https://www.cnblogs.com/zhengwei-cq/p/8108239.html