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)
{
    
@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: @) ))

 Jqgrid用法大同小异:

需要引用
   


   

第一步:定义一个呈现数据的表格 

第二部:在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 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);这种方法我还没有测试,不清楚能不能返回数据到界面上。这种方法看起来明显正规一点

你可能感兴趣的:(MVC4 Jqgrid设计与实现)