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); 
    } 

我希望你覺得這有幫助。讓我知道如果有任何問題