MVC4 Jqgrid设计与实现

项目本来使用的是webgrid。后台弃用改成Jqgrid插件。

首先介绍一下webgrid的用法：webgrid是mvc中HtmlHelper自带的。首先创建viewmodel用于数据的绑定，然后在页面中进行绑定一些参数的设置即可

具体如下：

@model Models.SearchPageViewModel
@{
    WebGrid grid = new WebGrid(null,
        rowsPerPage: Model.PagingInfo.ItemsPerPage,
        selectionFieldName: "selectedRow",
        ajaxUpdateContainerId: "gridContent",
        canSort: false);
    grid.Bind(Model.modelList, autoSortAndPage: false, rowCount: Model.PagingInfo.TotalItems);
}

@if (grid.TotalRowCount > 0)
{
    <div id="gridContent">
    @grid.GetHtml(
    tableStyle: "GridViewTable",
    headerStyle: "HeaderStyle",
    footerStyle: "FooterStyle",
    rowStyle: "RowStyle",
    alternatingRowStyle: "AltRowStyle",
    selectedRowStyle: "SelectedRowStyle",
    mode: WebGridPagerModes.All,
    numericLinksCount: 10,
    firstText: "首页",
    lastText: "尾页",
    previousText: "<",
    nextText: ">",
    columns: grid.Columns(
    grid.Column("RowNum", "序号", format: (item) => item.RowNum),
            grid.Column("XZQDM", "行政区代码", format: (item) => item.XZQDM, style: null, canSort: false),
            grid.Column("XZQMC", "行政区名称", format: (item) => item.XZQMC, canSort: false),
            grid.Column("UPTIME", "上传时间", format: (item) => item.UPTIME, canSort: false),
             grid.Column(header: "选择",
                    format: @<text><input class="check-box"  id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.PZWH"/></text>)
                                        ))
    </div>

Jqgrid用法大同小异：

需要引用<script type="text/javascript" src="~/scripts/locales/grid.locale-cn.js"></script>
    <script type="text/javascript" src="~/scripts/jqGrid/jquery.jqGrid.js"></script>

<link type="text/css" href="~/content/jquery-ui/jquery-ui-1.10.4.custom.css" media="screen" rel="Stylesheet" />
    <link type="text/css" href="~/Content/jqGrid/ui.jqgrid.css" media="screen" rel="Stylesheet" />

第一步：定义一个呈现数据的表格 <table id="gridUploadProg" style=" height:100%; width:100%"></table>

第二部：在js里面进行相关设置

var grid = $("#gridUploadProg");
         grid.jqGrid({
             url: 'ResultManage/QueryData',
             mtype: 'post',
             datatype: 'json',
             loadonce: false,
             data: {},
             colNames: ['项目ID', '行政区代码', '行政区名称'],
             colModel: [
                    { name: 'XMID', index: 'XMID', sortable: false, key: true, align: 'center', hidden: true },
                    { name: 'XZQDM', index: 'XZQDM' },
                    { name: 'XZQMC', index: 'XZQMC', align: 'center' },
                    { name: 'XMMC', index: 'XMMC', align: 'center' }
                ],
             rowNum: 10,
             rowList: [10, 15, 20, 30],
             pager: '#gridUploadProgPager',
             emptyrecords: "没有符合要求的数据",
             gridview: true,
             rownumbers: true,
             sortname: 'ProvinceCode',
             viewrecords: true,
             sortorder: 'asc',
             multiselect: true,
             caption: '任务管理列表',
             jsonReader: {
                 page: 'page',
                 total: 'total',
                 records: 'records',
                 root: 'rows'
             },
             height: '100%',
             loadui: 'block',
             autoScroll: false,
             loadComplete: function (data) { //完成服务器请求后，回调函数
                 //                alert(data.records);
                 if (data.records == 0) { //如果没有记录返回，追加提示信息
                     $("p").appendTo($("#gridUploadProg")).addClass("nodata").html("找不到相关数据！");
                 }
                 else { //否则，删除提示
                     $("p.nodata").remove();
                 }
             }

         });

第三步：在control里面进行模型的获取JSON的转换

 public void QueryData(string sidx = "XZQDM", string sord = "DESC", int rows = 10, int page = 1)
        {
            SearchConditionModel searchCondition = new SearchConditionModel();
            if (this.Session["SearchCondition"] != null)
            {
                searchCondition = (SearchConditionModel)this.Session["SearchCondition"];
            }

            int totalRecord = 0;
            IEnumerable<TsakManageViewModel> modelList = this.TaskManageDataContext.GetModelList(
                    out totalRecord,
                    provinceCode: searchCondition.XZQ,
                    rwlx: searchCondition.RWLX,
                    taskResult: searchCondition.SFTG,
                    orderField: sidx,
                    orderType: sord,
                    pageIndex: page,
                    pageSize: rows
                );
            //int index = (page - 1) * rows; // 开始记录数
            int totalPage = totalRecord % rows == 0 ? totalRecord
               / rows : totalRecord / rows + 1; // 计算总页数
            int pagesize = rows;
            string son = Newtonsoft.Json.JsonConvert.SerializeObject(modelList);

            son = "{ \"page\": " + page.ToString() + ", \"total\": " + totalPage.ToString() + ", \"records\": " + totalRecord.ToString() + ", \"rows\": " + son + "}";
            Response.Write(son);
        }

以后每一次分页查询都会进到这个action里面，实现分页实时查询数据。JSON数据前面一定要加记录数等信息用于分页的显示。当然还有其他方法返回json数据。理想的格式应该的返回JsonResult的。像这样 return Json(modelList, JsonRequestBehavior.AllowGet);这种方法我还没有测试，不清楚能不能返回数据到界面上。这种方法看起来明显正规一点