JQGrid 'undefined' 错误

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'。如果使用 pager 和 viewrecords: true，您还应该增加某些列的 width 的值。我在我的演示中包含了 jQuery("#pager_left").hide(); 语句，它隐藏了一些您现在不使用的寻呼机 block 。如果您将开始使用 navigator按钮，您应该删除该行。

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

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

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