上一篇文章简单利用JqGrid及ashx进行一个数据列表的显示，要文的重点是利用EF的分页与JqGrid进行结合，EF本文只是简单运用所以没有很规范，重点还是JqGrid分页的实现;本实例把JqGrid一些比较经常用到的内容封装到一个JS里面；
首先看下实例完成后的效果图：
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> <div id="gridPager"> </div> </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}]}
感谢您的阅读，坚持每天进步一点点，离成功就更近一步；希望文章对您有所帮助；[源代码下载]