JQGrid“未定义”错误

Question

我在尝试使用 JQGrid 时遇到 JavaScript 错误：

“消息：'undefined' 为空或不是对象”

在我的服务器上调试时，我看到我的 JSON 输出如下所示：（“id”值不在双引号内是否重要？）

{
"page":"1",
"total":"20",
"records":"5",
"rows":[
  {"id":1,"name":"Sam","phone":"732-333-2222"},
  {"id":2,"name":"Dan","phone":"000-222-1111"},
  {"id":6,"name":"George","phone":"333333"},
  {"id":4,"name":"Jerry","phone":"332-333-4444"},
  {"id":7,"name":"John","phone":"666666"},
  {"id":8,"name":"Tom","phone":"3333"}]
}

.. 我的页面如下所示：

<script type="text/javascript">
  jQuery(document).ready(function(){

  jQuery("#list").jqGrid({
  url:'/myUrlPage',
  datatype: 'json',
  mtype: 'GET',
  colNames:['Id', 'Name', 'Phone'],
  colModel :[
    {name:'id', index:'id', width:55},
    {name:'name', index:'name', width:90},
    {name:'phone', index:'phone', width:150, sortable:false} ],
  pager: jQuery('#pager'),
  rowNum:10, rowList:[10,20,30],
  sortname: 'id',
  sortorder: "desc",
  viewrecords: true,
  imgpath: 'themes/basic/images',
  caption: 'My first grid' }); });
</script>

Answer 1

如果你加入，你的主要问题将得到解决

jsonReader: { repeatitems: false }

jqGrid 中的参数。详情见the jqGrid documentation。

此外，我对您的演示进行了一些修改。你可以看到它here。我建议您删除 deprecated imgpath 参数。相反，我建议您使用height: 'auto'，这在大多数情况下会给您带来良好的结果。而不是jQuery('#pager')，最好只使用'#pager'。在使用寻呼机和viewrecords: true 的情况下，您应该另外增加某些列的width 的值。我在我的演示中包含了jQuery("#pager_left").hide(); 语句，它隐藏了一些你现在不使用的寻呼机块。如果您将开始使用navigator 按钮，您应该删除该行。

关于您使用的 JSON 数据的更多说明。 id、page、total 和 records 属性的值可以是字符串或整数，因此 "id":1 将提供与 "id":"1" 相同的结果。

了解如何填写page、total 和records 非常重要。您当前的值为 page=1、total=20、records=5 并且您的数据包含 6 行。所有的数据都没有意义。 jqgrid 向服务器询问附加到 URL 的附加参数，以提供每页 10 行的一页数据 (rowNum:10)。您从服务器得到的回答意味着您的数据总共包含 5 个项目（记录 = 5）。如果您在页面中订购数据（5 项）（每页 10 项），您将有 20 页（总计 = 20），并且从那里开始的第一个（页面 = 1）您将填写数据（6 项）。来自您的 JSON 数据的 page、total 和 records 的奇怪值遵循 the demo 上寻呼机中的奇怪值：

我建议你阅读the answer，我试图描述为什么 jqGrid 需要如此奇怪的 JSON 数据格式。