最近項目決定運用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>
<p id="pager3">
</p>
</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; }
}
}