jqGrid在MVC中的版本是已经通过 HtmlHelper 的扩展方法封装后的产物，webForm版本貌似也将其封装成了服务器端空间，所以我推荐下载原生的jqGrid版本的地址为：http://www.trirand.com/blog/?page_id=6
推荐的Demo学习网址为：http://trirand.com/blog/jqgrid/jqgrid.html
Documentation：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
jqGrid中的一些概念：
![griddesc[1]](https://images0.cnblogs.com/blog/484997/201402/281709532929348.png "griddesc[1]")
我们调用jqGrid的时候用的语法是：
jQuery("#grid_id").jqGrid(options);
这里的option是一系列的键值对，可以是方法、属性值、事件，其中有些是可选的，有些事必须的，你可以将我下面的demo中的options作为参考。
第一个jqGrid Demo
接收json数据时候的前台代码:
如果要前台要接受xml数据，前台代码请看：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:conventions
<head runat="server">
<meta name="viewport" content="width=device-width" />
<script src="../../Scripts/jquery-1.7.2.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.21.custom.min.js"></script>
<script src="../../Scripts/grid.locale-en.js"></script>
<script src="../../Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
jQuery("#list2").jqGrid({
url: '/Home/ReturnJson',
datatype: "json",
colNames: ['Name', 'PhoneNo', 'EmailAddress'],
colModel: [
{ name: 'Name', index: 'Name', 55 },
{ name: 'PhoneNo', index: 'PhoneNo', 90 },
{ name: 'EmailAddress', index: 'EmailAddress', 100 },
],
sortname: 'Name',
autoWidth:false,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
autoencode: true,
sortorder: "desc",
caption: "JSON Example",
jsonReader: {
repeatitems: false
},
});
jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
})
</script>
<title>Index</title>
</head>
<body>
<div>
<table id="list2"></table>
<div id="pager2"></div>
</div>
</body>
</html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<script src="../../Scripts/jquery-1.7.2.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.21.custom.min.js"></script>
<script src="../../Scripts/grid.locale-en.js"></script>
<script src="../../Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
jQuery("#list2").jqGrid({
url: '/Home/ReturnJson',
datatype: "json",
colNames: ['Name', 'PhoneNo', 'EmailAddress'],
colModel: [
{ name: 'Name', index: 'Name', 55 },
{ name: 'PhoneNo', index: 'PhoneNo', 90 },
{ name: 'EmailAddress', index: 'EmailAddress', 100 },
],
sortname: 'Name',
autoWidth:false,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
autoencode: true,
sortorder: "desc",
caption: "JSON Example",
jsonReader: {
repeatitems: false
},
});
jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
})
</script>
<title>Index</title>
</head>
<body>
<div>
<table id="list2"></table>
<div id="pager2"></div>
</div>
</body>
</html>
返回json数据的后台代码后台代码:
MVC中返回xml数据时候需要扩展，扩展的方式请看：http://www.cnblogs.com/xfrog/archive/2011/01/06/1929212.html
public ActionResult Second()
{
return View();
}
public JsonResult ReturnJson(int page,int rows,string search,string sidx,string sord)
{
TestModel[] data = new TestModel[] {
new TestModel{id=1,Name="张三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
new TestModel{id=2,Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
new TestModel{id=3,Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
};
int currentPage = Convert.ToInt32(page)-1;
int totalRecords = data.Length;
var totalPages = (int)Math.Ceiling(totalRecords/(float)rows);
var jsonData = new
{
page=page,
total=totalPages,
records=totalRecords,
rows = data
};
return Json(jsonData,JsonRequestBehavior.AllowGet);
}
MVC中返回xml数据时候需要扩展，扩展的方式请看：http://www.cnblogs.com/xfrog/archive/2011/01/06/1929212.html
public ActionResult Second()
{
return View();
}
public JsonResult ReturnJson(int page,int rows,string search,string sidx,string sord)
{
TestModel[] data = new TestModel[] {
new TestModel{id=1,Name="张三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
new TestModel{id=2,Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
new TestModel{id=3,Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
};
int currentPage = Convert.ToInt32(page)-1;
int totalRecords = data.Length;
var totalPages = (int)Math.Ceiling(totalRecords/(float)rows);
var jsonData = new
{
page=page,
total=totalPages,
records=totalRecords,
rows = data
};
return Json(jsonData,JsonRequestBehavior.AllowGet);
}
但我们能够成功的run起来我们的demo以后，如果要实现一些特殊的功能，我们可以从demo中进行学习，在文章额考试我们给出了demo的地址。