jQGrid asp.net mvc 3从零开始执行

Question

我试图在我的应用程序中实现jQGrid，其中包含一些基本功能，包括过滤和子网格。我看了许多文章，但其中许多文章看起来很老旧。我认为我正在努力实现它的基础。我会很感激，如果你能提供基本的控制器视图结构或指任何类型的从无到有教程与asp. net mvc 3.

Answer 1

这里是查看代码（第一加价，那么JS）：

@model SampleApp.SampleModel 

@{ 
    ViewBag.Title = "Stackoverflow Title"; 
    Layout = "~/Views/Shared/_defaultLayout.cshtml"; 

} 

<link href="@Url.Content("~/Content/themes/cupertino/jquery-ui-1.8.13.custom.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/grid/ui.jqgrid.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/ui/jquery-ui-1.8.12.custom.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/grid/grid.locale-en.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/grid/jquery.jqGrid.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/myJSHelper.js")" type="text/javascript"></script> 

<script type="text/javascript" id="loadGridResultsScript1"> 
    // This code LOADs the grid by calling the MVC Action to get Data 
    $(document).ready(function() { helper.loadSearchResults('@Model.JobCode'); }); 
</script> 

<!-- these are the jQuery Grid controls --> 
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

下面是myHelper JS文件中的JS功能：

loadSearchResults: function (id) { 

     $("#list").jqGrid({ 
      url: vpath + '/Sample/GetTargets/' + id, 
      datatype: 'json', mtype: 'POST', colNames: cols, 
      colModel: colModel, pager: $('#pager'), 
      rowNum: 15, rowList: [5, 10, 15, 25, 50, 100], sortname: cols[1], 
      sortorder: "asc", viewrecords: true, 
      imgpath: '', caption: ' ' 
     }); 
     $("#list").setGridWidth(1000, true); 
     $("#list").setGridHeight(350, true); 


    } 

这里是jQuery的调用操作：

 public ActionResult GetTargets(string id, string sidx, string sord, int page, int rows) 
    { 

     var repo = IOCContainer.Resolve<DataRepository>(); 
     //////////////////////////////////////////////////////////////////// 
     var job = svc.GetJobByCode(id); 
     // job is my 'Model', it is a System.Data.DataSet 

     int pageIndex = Convert.ToInt32(page) - 1; 
     int pageSize = rows; 

     int totalRecords = (job.Targets == null) ? 0 : job.Tables[0].Rows.Count; 
     int totalPages = (int)Math.Ceiling((float)totalRecords/(float)pageSize); 
     List<DataRow> pageSet = Enumerable.Empty<DataRow>().ToList(); 

     if (totalRecords > 0) 
     { 
      // Get rows for current page!!! 
      if (sord == "asc") 
      { 
       if (sidx == " ") sidx = job.Tables[0].Columns[0].ColumnName; 

       pageSet = job.Tables[0].Rows.Cast<DataRow>() 
         .OrderBy(q => q[sidx]) 
         .Skip(pageIndex * pageSize) 
         .Take(pageSize) 
         .ToList(); 
      } 
      else 
       pageSet = job.Targets.Tables[0].Rows.Cast<DataRow>() 
         .OrderBy(q => q[sidx]) 
         .Reverse() 
         .Skip(pageIndex * pageSize) 
         .Take(pageSize) 
         .ToList(); 
     } 

     var cols = GetColumnNames(job.Tables[0]); 
     // Func to get Cells, called later on in code... 
     Func<DataRow, string[], string[]> getCells = (pkg, columns) => 
     { 
      var cellList = new List<string>(); 
      cellList.Add(pkg[0].ToString()); 
      foreach (var col in columns) 
      { 
       if (col.StartsWith("_")) continue; 
       object cellContent = pkg[col]; 
       string cellText = string.Empty; 
       if (cellContent is DateTime) 
       { 
        cellText = ((DateTime)cellContent).ToString("MM/dd/yyyy"); 
       } 
       else if (cellContent is decimal || cellContent is double) 
       { 
        cellText = string.Format("{0:c}", cellContent); 
       } 
       else 
       { 
        cellText = String.Format("{0}", cellContent); 
       } 
       cellList.Add(cellText); 
      } 

      return cellList.ToArray(); 
     }; 
     var jsonData = new 
     { 
      total = totalPages, 
      page, 
      records = totalRecords, 
      rows = (
       from item in pageSet 
       select new 
       { 
        i = item[0].ToString(), 
        cell = getCells(item, cols) 
       }).ToArray() 
     }; 
     return Json(jsonData); 
    } 

我希望你觉得这有帮助。让我知道如果有任何问题