JQGrid没有显示数据

Question

我对MVC和Jquery相当陌生。最近几天我试图用Jqgrid http://www.trirand.com/blog/在我的数据库中显示数据。我使用EF代码首先创建我的唯一一类“作者”

public class Author 
{ 

    public int AuthorID { get; set; } 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 

    public string FullName 
    { 
     get 
     { 
      return FirstName+ " "+LastName ; 
     } 
    } 
} 

，这是我的“AuthorController”的创建JSON数据：

public ActionResult LinqGridData(string sidx, string sord, int page, int rows) 
{ 
    var jsonData = new 
    { 
     total = 5, 
     page = 1, 
     records = db.Authors.Count(), 
     rows = db.Authors.Select(a => new 
           { 
            id = a.AuthorID, 
            cell = new { a.AuthorID, a.FirstName, a.LastName } 
           } 
     ) 
    }; 
    return Json(jsonData, JsonRequestBehavior.AllowGet); 
} 

我也尝试了不同的方法，让我的JSON数据：

public ActionResult LinqGridData (string sidx, string sord, int page, int rows) 
    { 
     var jsonData = new { 
     total = 5, 
     page=1, 
     records = db.Authors.Count(), 
     rows = (from a in db.Authors 
       select new 
       { 
        id = a.AuthorID, 
        cell = new { a.AuthorID, a.FirstName, a.LastName } 
       } 
     ) 
     }; 
     return Json(jsonData,JsonRequestBehavior.AllowGet); 
    } 

，这里是我的JavaScript，我在我的视图中使用：

$(function() { 
    $("#list").jqGrid({ 
     url: '/Author/LinqGridData', 
     datatype:'json', 
     mtype: 'GET', 
     colNames:['Author ID', 'First Name', 'Last Name'], 
     colModel:[ 
      {name:'AuthorID',index:'AuthorID',width:55 }, 
      {name:'FirstName',index:'FirstName',width:90 }, 
      {name:'LastName',index:'LastName',width:80,align:'right' } 
     ], 
     pager:'#pager', 
     rowNum: 10, 
     rowList:[5, 10, 20, 30], 
     sortname:'AuthorID', 
     sortorder:'desc', 
     viewrecords:true, 
     gridview:true, 
     caption:'Author List' 
    }); 
}); 
jQuery("#datagrid").jqGrid('navGrid', '#navGrid', { edit: true, add: true, del: true }); 

我可以用虚拟数据显示网格。这种操作方法：

public ActionResult GridData(string sidx, string sord, int page, int rows) 
    { 
     var jsonData = new 
     { 
      total = 1, // we'll implement later 
      page = 1, 
      records = 3, // implement later 
      rows = new[] 
      { 
       new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}}, 
       new {id = 2, cell = new[] {"2", "15", "Is that a good question?"}}, 
       new {id = 3, cell = new[] {"3", "23", "Why is the sky in the sky?"}}  
      } 
     }; 
     return Json(jsonData,JsonRequestBehavior.AllowGet); 
    } 

问题是，每当我想从我的数据库显示的数据，我只可以显示网格本身不是数据。 我试图在发送到视图之前将json数据转换为toList（）或toArary（），结果相同。我希望我明确自己。

任何帮助，将不胜感激。

Answer 1

我终于设法从我的数据库显示数据。问题出在我的查询中。我用这个方法对我的操作方法：

public JsonResult LinqGridData (string sidx, string sord, int page, object rows) 
    { 
     var authors = (from a in db.Authors select a).ToList(); 
     var jsonData = new { 
     total = 5, 
     page=1, 
     records = db.Authors.Count(), 
     rows = authors.Select(a => new 
        { 
         id = a.AuthorID, 
         cell = new[] { a.AuthorID.ToString(), a.FirstName, a.LastName } 
        } 
     )    
     }; 
     return Json(jsonData,JsonRequestBehavior.AllowGet);    
    } 

，我用这个在我的javascript：

$(function() { 
$("#list").jqGrid({ 
    url: "/Author/LinqGridData", 
    datatype: "json", 
    jsonReader: { 
     root: "rows", 
     page: "page", 
     total: "total", 
     records: "records", 
     cell: "cell", 
     id:"id" 
    }, 
    mtype: "GET", 
    colNames: ["Author ID", "First Name", "Last Name"], 
    colModel: [ 
     { name: "AuthorID", key: true, width: 55 }, 
     { name: "FirstName", width: 80 }, 
     { name: "LastName", width: 100, align: "right" } 
    ], 
    pager: "#pager", 
    rowNum: 10, 
    rowList: [5, 10, 20], 
    sortname: "AuthorID", 
    sortorder: "desc", 
    viewrecords: true, 
    gridview: true, 
    width: 610, 
    height: 250, 
    caption: "Author List" 
}); 

}）; （“＃list”）。jqGrid（“navGrid”，“#pager”，{edit：true，add：true，del：true}）;

是的，你可以省略'cell'属性并减少你的json数据。你也可以把'id'：0这通常意味着把第一个项目作为id。我也使用'键'属性，但它是多余的。您也可以将您的查询结果作为Array传递。如果任何人都可以告诉我是否有任何使用列表比其他人的好处将非常感激。

感谢您的帮助 好运

Answer 2

你有没有尝试jsonReader与“repeatitems：false”？ 例如：

$("#list").jqGrid({ 
    url: '/Author/LinqGridData', 
    datatype:'json', 
    jsonReader: { 
     repeatitems: false 
    }, 
    ..... 

UPDATE： 如果你从你的LinqGridData方法返回的响应主体，它看起来像这样：

{"total":5,"page":1,"records":1,"rows": 
    [ 
    {"id":"1","cell":{"AuthorID":"1","FirstName":"Mike","LastName":"Lee"}}, ..... 
    ] 
} 

但我想应该是这样的：

{"total":5,"page":1,"records":1,"rows": 
    [ 
    {"id":"1","cell":{"1", "Mike", "Lee"}}, ..... 
    ] 
} 

其实这是你的“伪数据”版本的响应体。

我会在下面发表我的工作示例。在这个例子中，我没有使用'cell'属性。
在服务器端：

 var myQuery = from t in db.Customers 
         select t; 
     var jsonData = new 
     { 
      total = totalPages, 
      page = pageNum, 
      records = totalRecords, 
      rows = myQuery.ToList() 
     }; 

     return Json(jsonData, JsonRequestBehavior.AllowGet); 

在客户端：

{ 
    url: '@Url.Action("GetList")', 
    datatype: 'json', 
    jsonReader: { 
     repeatitems: false 
    }, 
    mtype: 'GET', 
    colModel: [ 
     { 
     name: 'CustomerID', label: 'ID', hidden: false, width: 40, sortable: true 
     }, 
     { 
     name: 'CompanyName', label: 'Company', width: 100, align: 'center' 
     }, 
    ] 
} 

希望这有助于。