JQuery——jqGrid配置

标签：

近期的一个项目中，又用到jqGrid，之前的项目中也有用到过，可是之前基本都是别人已经配置引用好js的，自己只需要copy下就可以了，这次的项目完全是需要自己配置的，然后就开始坑爹之路了，在网上也找了很多的配置帖子，但是很多都没有提供下载js的地址，这就很尴尬了，结果自己去单下一个个js，但是最后配好出来结果又缺少图片，最后还是给我弄好了，所以在这几下来，也方便自己以后可能需要在查查看吧。

一、引用的js与css地址下载

     在项目中你需要在页面引用如下几个js文件（版本不同，自己跟着选择版本就好）

       <link href="~/css/ui.jqgrid.css" rel="stylesheet" />
        <link href="~/Themes/base/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
        <link href="~/css/jquery-ui.css" rel="stylesheet" />

          1.  <script src="~/Scripts/jquery-1.11.0.min.js"></script>
          2.  <script src="~/Scripts/jquery-ui-1.9.2.custom.js"></script>
          3. <script src="~/Scripts/grid.locale-cn.js"></script>
          4. <script src="~/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 = JsonHelper.ToJson(list);
            var jsonData = new
            {
                page = page,
                total = RowNum,
                records = Total,
                rows = list
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

list主要是调用service中的方法，然后传回来的数据就是 GroupDayModel的list数据，所以不同的项目中，你只需要传递你需要的model的list数据就可以了；

Total变量是用来存储数据库中的查询table数据的总数，这个参数到时候需要传回给前台页面，

JQuery——jqGrid配置

标签：

原文地址：http://www.cnblogs.com/jisin/p/5891854.html