jqGrid的使用和模板样式套用
一、环境的准备
需要下载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)即可。
五、两个重要属性