为什么 JQGrid 无法显示数据？

Question

在下面的代码中，动作方法GetData()将数据加载到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>


    }

Answer 1

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

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

我使用cmTemplate: { width: 100 } 来减少width: 100 在colModel 的每一列中的重复。

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

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 结合使用。它允许在显示第一页之前对从服务器返回的数据进行排序或过滤。