为啥 JQGrid 无法显示数据？

Posted 2023-05-09

【中文标题】为啥 JQGrid 无法显示数据？

【英文标题】：Why JQGrid failed to show data?为什么 JQGrid 无法显示数据？

【发布时间】：2017-01-04 08:51:02

【问题描述】：

在下面的代码中，动作方法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>


    

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

【讨论】：

常用的jqgrid版本是什么？

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

@vitofila：没有“常用”的 jqGrid 版本。它最初是由 Tony Tomov 在 trirand 开发的，在 MIT/GPLv2 许可下免费提供。他发布了the statement，将jqGrid 重命名为Guriddo jqGrid JS 并使其商业化（参见价格here）。之后我启动了基于 jqGrid 4.7 的 fork “free jqGrid”，修复了许多错误并实现了许多新功能。我使用 4.x.y 作为版本号，因为我试图保持 与旧版本 jqGrid 的兼容性。

@vitofila：存在“旧”文档here。免费的 jqGrid 与旧的 jqGrid 兼容，因此大多数信息仍然是正确的。 the wiki 中有很多信息，在每个已发布的免费 jqGrid 版本的 README 中都有很多信息，并且存在 the preliminary documentation。据我所知，没有视频。免费 jqGrid 的当前版本是 4.13.4。我建议你使用它。

trirand jqgrid（这是我在那个例子中使用的）是一个成熟的专业插件吗？