为什么JQGrid未能显示数据？

在下面的代码中，动作方法GetData()将数据加载到jqgrid。但有趣的是，它显示它有数据，但行没有显示数据，分页器组件显示它有多个页面，我可以单击行，甚至在单击某行时仍显示蓝色边框颜色，但仍未显示数据。为什么JQGrid未能显示数据？

我做了一切，我可以找到问题，有没有办法解决这个问题？

操作方法：

DBContext db = new DBContext(); 

public ActionResult Index() 
{ 
    return View(); 
} 

public JsonResult GetData() 
{ 
    try 
    { 
     var customers = db.Customers.Select(x => new { x.CustomerID, x.FirstName, x.MiddleName,x.CompanyName, x.SalesPerson, x.EmailAddress }).ToList(); 
     return Json(customers, JsonRequestBehavior.AllowGet); 
    } 
    catch (Exception) 
    { 

     throw; 
    } 
}

的观点：

<script src="~/Scripts/jquery-3.1.0.js"></script> 
<script src="~/Scripts/jquery-ui-1.12.0.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script> 
<script src="~/Scripts/jquery.jqGrid.min.js"></script> 

<h2>Index</h2> 

<table id="customerGrid"></table> 
<div id="pager1"></div> 

@section scripts{ 
    <script> 
     $(function() { 

      jQuery("#customerGrid").jqGrid({ 
       url: 'Home/GetData', 
       datatype: "json", 
       mtype: "GET", 
       postData:'', 
       colNames: ['Customer ID', 'First Name', 'Last Name'], 
       colModel: [ 
        { name: 'customerid', index: 'CustomerID', key:true,sorttype:'int', width: 100 }, 
        { name: 'firstname', index: 'FirstName', width: 100 },      
        { name: 'lastname', index: 'LastName', width: 100 }      
       ], 
       viewrecords: true, 
       gridview: true, 
       autoencode: true, 
       loadonce: true, //if all data loaded at once 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       pager: '#pager1', 
       sortname: 'customerid', 
       viewrecords: true, 
       sortorder: "desc", 
       caption: "Customer List", 
       width:600 
      }); 
      jQuery("#customerGrid").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false }); 
     }) 
    </script> 


    }

来源

2016-08-28 vito fila

我建议你从未在colModel使用index财产。要解决此问题，您应该使用colModel中的name属性的正确值。例如：

colModel: [ 
    { name: 'CustomerID', key: true, sorttype: 'int' }, 
    { name: 'FirstName' },      
    { name: 'LastName' }      
], 
cmTemplate: { width: 100 }

我用cmTemplate: { width: 100 }减少的colModel每一列的width: 100复制。

我建议你另外使用height: "auto"和jsonReader: { id: "CustomerID" }。指定jsonReader.id后，可以考虑删除CustomerID列。 jqGrid仍将分配行的id属性（网格的<tr>元素的ID），称为rowid。

选项sortname: 'customerid'也是错误的，它不起作用。如果您使用旧的jqGrid 4.6，然后服务器必须正确地返回排序的数据。我建议你升级到free jqGrid 4.13.4。您可以从CDN加载它：请参阅the wiki article（包括grid.locale-en.js在免费的jqGrid中不需要）或从npm或NuGet安装。之后，您可以使用forceClientSorting: true，它与loadonce: true结合使用。它允许在显示第一页之前对从服务器返回的数据进行排序或过滤。

来源

2016-08-28 13:18:24 Oleg

什么是常用的jqgrid版本？ –

是否有适合JQGrid和视频的文档 –

@vitofila：没有“常用”的jqGrid版本。它最初由Tony Tomov以三位数开发，并且可以在MIT/GPLv2许可下免费获得。他发布了[声明]（http://www.trirand.com/blog/?p=1438），将jqGrid更名为Guriddo jqGrid JS，并将其改为商业版（请参见价格[here]（http://guriddo.net） /？PAGE_ID = 103334））。之后，我开始了基于jqGrid 4.7的fork“free jqGrid”，它修复了许多bug并实现了许多新功能。我使用4.x.y作为版本号，因为我试图保持**与旧版本的jqGrid **的兼容性。 – Oleg

为什么JQGrid未能显示数据？

回答

相关问题