利用JqGrid结合ashx显示列表之一
最近项目决定运用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：后台代码如下：
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",PassWord="2111", Address="厦门", Sex="男"}, new ChinaUser() { ID=2,UserName="踏浪帅3",PassWord="2222", Address="厦门3", Sex="男3"}, new ChinaUser() { ID=2,UserName="踏浪帅4",PassWord="4444", Address="厦门4", Sex="男4"}, new ChinaUser() { ID=2,UserName="踏浪帅5",PassWord="25555", Address="厦门5", Sex="男5"}, new ChinaUser() { ID=2,UserName="踏浪帅6",PassWord="22226", Address="厦门6", Sex="男6"} }; 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 string PassWord { get; set; } public string Sex { get; set; } public string Address { 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; } } }
2：前台代码如下：
<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 type="text/javascript"> $(function () { $("#list").jqGrid({ url: 'HandlerTest.ashx', datatype: "json", mtype: "GET", colNames: ['ID', 'UserName', 'PassWord', 'Address', 'Sex'], colModel: [ { name: 'ID', index: 'ID', width: 20 }, { name: 'UserName', index: 'UserName', width: 80 }, { name: 'PassWord', index: 'PassWord', width: 80 }, { name: 'Address', index: 'Address', width: 80 }, { name: 'Sex', index: 'Sex', width: 80 } ], rowNum: 10, rowList: [10, 20, 50], loadonce: true, sortname: 'ID', viewrecords: true, sortorder: 'desc', pager: "#pager3", 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; } }, ondblClickRow: function () { SelectShow(); } }).navGrid("#pager3", { edit: false, add: false, del: false }); jQuery("#list").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders: [ { startColumnName: 'PassWord', numberOfColumns: 2, titleText: '<em>Info</em>' } ] }); }); function SelectShow() { var ID = jQuery("#list").jqGrid('getGridParam', 'selrow'); if (ID) { alert("您选中的列为:" + ID); $("#list").trigger("reloadGrid"); } else { alert("请选择"); } } </script> </head> <body> <form id="form1" runat="server"> <table id="list"> </table> <div id="pager3"> </div> </form> </body> </html>
其中下面的代码就是组成复杂表头（表示从哪一列开始，并有几列在其下面,显示的头部名称）：
jQuery("#list").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders: [ { startColumnName: 'PassWord', numberOfColumns: 2, titleText: '<em>Info</em>' } ] });
双击事件并刷新列表的代码如下ondblClickRow: function () { SelectShow(); }：
function SelectShow() { var ID = jQuery("#list").jqGrid('getGridParam', 'selrow'); if (ID) { alert("您选中的列为:" + ID); $("#list").trigger("reloadGrid"); } else { alert("请选择"); } }
通过上面几步就可以显示列表数据；
注意:
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
感谢您的阅读，坚持每天进步一点点，离成功就更近一步；希望文章对您有所帮助；