首页 > 代码库 > JQuery——jqGrid配置
JQuery——jqGrid配置
近期的一个项目中，又用到jqGrid，之前的项目中也有用到过，可是之前基本都是别人已经配置引用好js的，自己只需要copy下就可以了，这次的项目完全是需要自己配置的，然后就开始坑爹之路了，在网上也找了很多的配置帖子，但是很多都没有提供下载js的地址，这就很尴尬了，结果自己去单下一个个js，但是最后配好出来结果又缺少图片，最后还是给我弄好了，所以在这几下来，也方便自己以后可能需要在查查看吧。
一、引用的js与css地址下载
在项目中你需要在页面引用如下几个js文件（版本不同，自己跟着选择版本就好）
<link href="http://www.mamicode.com/~/css/ui.jqgrid.css" rel="stylesheet" />
<link href="http://www.mamicode.com/~/Themes/base/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link href="http://www.mamicode.com/~/css/jquery-ui.css" rel="stylesheet" />
1. <script src="http://www.mamicode.com/~/Scripts/jquery-1.11.0.min.js"></script>
2. <script src="http://www.mamicode.com/~/Scripts/jquery-ui-1.9.2.custom.js"></script>
3. <script src="http://www.mamicode.com/~/Scripts/grid.locale-cn.js"></script>
4. <script src="http://www.mamicode.com/~/Scripts/jquery.jqGrid.min.js"></script> 备注：引用的顺序不能乱了，否则运行时会在前台报错
1和4文件的下载地址是：http://www.trirand.com/blog/?page_id=6 ；2和3文件的下载地址是：http://jqueryui.com/download/all/ （你不需要选择下载什么，先全部下载下来，然后再去下载好的压缩包了就可以找到你要的js文件），3个需要引用的css文件也在第二地址下的压缩包中找的到，
二、前台代码
首先在html页面中添加2二标签，一个用于存放table，一个用于存放分页栏：
<div class="row-fluid">
<div class="span12">
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
</div>
然后再写js：
$("#gridTable").jqGrid({
datatype: "json",
url: "GetQueryData?QueryStr=" + $("#txtSearchGroup").val(),
mtype: ‘GET‘,
multiselect: true,
height: 270,
colNames: [‘ID‘, ‘日期‘, ‘大区‘, ‘省‘, ‘城市‘, ‘群名‘, ‘医院名称‘, ‘进群状态‘, ‘总计群成员数‘],
colModel: [
{ name: ‘Raws‘, index: ‘Raws‘, width: 90, sorttype: "int" },
{ name: ‘Date‘, index: ‘Date‘, width: 120 },
{ name: ‘Region‘, index: ‘Region‘, width: 90 },
{ name: ‘Province‘, index: ‘Province‘, width: 90 },
{ name: ‘City‘, index: ‘City‘, width: 90 },
{ name: ‘GroupName‘, index: ‘GroupName‘, width: 200 },
{ name: ‘HospitalName‘, index: ‘HospitalName‘, width: 200 },
{ name: ‘Status‘, index: ‘Status‘, width: 120 },
{ name: ‘TotleNumber‘, index: ‘TotleNumber‘, width: 130 }
],
sortname: ‘Raws‘,
sortorder: ‘asc‘,
viewrecords: true,
rowNum: 10,
rowList: [10, 15, 20],
pager: "#gridPager",
jsonReader: {
root: "rows",
page: "page",
records: "records",
total: "total",
repeatitems: false,
},
}).navGrid(‘#gridPager‘, { edit: false, add: false, del: false });（备注我的默认在加载页面的时候传参数回去的，如果第一次加载不需要的话，只需要修改URL的配置就可以了）
三、后台代码：
public JsonResult GetQueryData( string QueryStr,int page, int rows)
{
var DataStr = QueryStr.Replace("/0", "/");
List<GroupDayModel> list = JsonHelper.ToObject<List<GroupDayModel>>(JsonHelper.ToJson(WechatGroupService.GetQueryRowData(DataStr, page, rows)));
int Total = WechatGroupService.GetQueryTotalNumber(DataStr);
int RowNum = 0;
if (Total > 0)
{
if (Total % rows > 0)
{
RowNum = Total / rows + 1;
}
else
RowNum = Total / rows;
}
var tempdata = http://www.mamicode.com/JsonHelper.ToJson(list);
var jsonData = http://www.mamicode.com/new
{
page = page,
total = RowNum,
records = Total,
rows = list
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
list主要是调用service中的方法，然后传回来的数据就是 GroupDayModel的list数据，所以不同的项目中，你只需要传递你需要的model的list数据就可以了；
Total变量是用来存储数据库中的查询table数据的总数，这个参数到时候需要传回给前台页面，
JQuery——jqGrid配置