JQGrid'undefined'错误

Question

尝试使用JQGrid时出现JavaScript错误：

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

当我在服务器上调试时，我看到我的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'更好。如果使用寻呼机和width，您还应该为某些列增加viewrecords: true的值。我在我的演示中包含了jQuery("#pager_left").hide();语句，该语句隐藏了一些您现在不使用的寻呼机块。如果您将开始使用navigator按钮，则应删除该行。

关于您使用的JSON数据的另外一个评论。 id，page，total和records属性的值可以是字符串或整数，因此"id":1会为您提供与{{1}相同的结果}}

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

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