一、環境的准備
需要下載jQuery和jqGrid。
1、引入CSS：
<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /> （這個文件以后可以通過替換，更換皮膚樣式）
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
2、引入JS：
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
因為jqGrid3.6及以后的版本集成了jQuery UI，所以，此處需要導入UI相關js和css。另外grid.locale-en.js這個語言文件必須在jquery.jqGrid.min.js之前加載，否則會出問題。
3、代碼如下
html頁面：
<body>
<div>
<div>
<table id="list2"></table>
</div>
<div id="pager2"></div>
</div>
</body>
jqGrid數據綁定
$(function () {
$("#list2").jqGrid(
{
url: "../JQGridTest/Index", //這個地方用的是MVC的頁面，JQGridTest是控制器的名稱，Index是控制器中名為Index的ActionResult方法。
datatype: "json",
mtype: 'post',
colNames: ['編號', '標題', '內容'],
colModel: [
{ name: 'NID', width: 200, sortable: false },
{ name: 'Title', width: 200, sortable: false },
{ name: 'Concent', width: 200, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: jQuery('#pager2'),
recordtext: "第{0}-{1}條，共{2}條",
height: '200',
caption: '信息管理系統'
})
})
public ActionResult Index() { NewsBLL bllNews = new NewsBLL(); List<NewsEntity> listNewsEntity = bllNews.GetNewsList(); var json = new { page = 1, total = 1, records = 4, rows = listNewsEntity }; return Json(json, JsonRequestBehavior.AllowGet); //return View(); }
四、換膚
如果數據顯示出來后，樣式不正確，需要參考一下文章：https://my.oschina.net/dongqianlin/blog/77318
我是加的過渡性XHTML ：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果要換膚可以參考文章：http://www.360doc.com/content/14/0310/09/16002580_359201920.shtml，具體如下：
進入http://jqueryui.com/themeroller/ 下載需要的皮膚。然后替換掉第一個CSS文件（jquery-ui-1.10.4.custom.min.css）即可。
五、兩個重要屬性