最近项目决定运用JqGrid列表控件显示相关数据，以前接触比较多还是easyui和Ext.Net的列表控件，文章简单写的小实例进行一个总结；
1:引入相关的JS及CSS文件,JqGrid目前可以利用Jquery UI的皮肤：
<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>
2:Html签标（一个用于列表显示 一个用于分页的存放）：
<body>
<form id="form1" runat="server">
<table id="list">
</table>
<div id="pager3">
</div>
</form>
</body>
3:JS内容：
<script type="text/javascript"> $(function () { $("#list").jqGrid({ url: ‘HandlerTest.ashx‘, datatype: "json", mtype: "GET", colNames: [‘ID‘, ‘UserName‘], colModel: [ { name: ‘ID‘, index: ‘ID‘, width: 20 }, { name: ‘UserName‘, index: ‘UserName‘, width: 80 } ], rowNum: 10, loadonce: true, sortname: ‘ID‘, viewrecords: true, sortorder: ‘desc‘, caption: "客户列表", jsonReader: { repeatitems: false, root: function (obj) { return obj.rows; }, page: function (obj) { return obj.page; }, total: function (obj) { return obj.total; }, records: function (obj) { return obj.records; } } }).navGrid("#pager3", { edit: false, add: false, del: false }); }); </script>
上面的代码可以查看jqGrid相关属性说明，其中比较重要的jsonReader,刚开始没有编写这个导致数据一直显示不出来；JqGrid对数据的显示格式要求比较严格，
例如下面这个是一个比较准确的JSON格式显示；其属性分别代码分页的相关属性及数据的显示格式；
{ "page": "1", "total": "10", "records": "10", "rows": [ { "ID": 1, "UserName": "Wujy" }, { "ID": 2, "UserName": "踏浪帅" } ] }
4:后端代码HandlerTest.ashx：
using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Script.Serialization; namespace WebApplication1 { /// <summary> /// HandlerTest 的摘要说明 /// </summary> public class HandlerTest : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; List<ChinaUser> list = new List<ChinaUser>(){new ChinaUser() { ID=1,UserName="Wujy"}, new ChinaUser() { ID=2,UserName="踏浪帅"} }; GridData model = new GridData(); model.page = "1"; model.records = "10"; model.total = "10"; model.rows = list; JavaScriptSerializer serializer = new JavaScriptSerializer(); string Resul = serializer.Serialize(model); context.Response.Write(Resul); } public bool IsReusable { get { return false; } } } public class ChinaUser { public int ID { set; get; } public string UserName { get; set; } } public class GridData { public string page { set; get; } public string total { get; set; } public string records { get; set; } public List<ChinaUser> rows { get; set; } } }
通过上面几步就可以显示列表数据；
注意:
1:网上有很多的JSON在线验证是否正确，例如:http://jsonformatter.curiousconcept.com/ http://jsonlint.com/
2:在访问上面的页面时可以通过网络查看器发现其请求的URL为：
/HandlerTest.ashx?_search=false&nd=1397385085506&rows=10&page=1&sidx=ID&sord=desc 其中可以发现它自动带个几个参数，所以后台可以运用上面的参数进行分页显示；
3:JqGrid官网实例地址：www.trirand.com/blog/jqgrid/jqgrid.html
感谢您的阅读，坚持每天进步一点点，离成功就更近一步；希望文章对您有所帮助；
利用JqGrid结合ashx显示列表之一,布布扣,bubuko.com
原文：http://www.cnblogs.com/wujy/p/3662575.html