JQGrid“未定义”错误

Question

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

“消息：'未定义'为空或不是对象”

在服务器上调试时，我看到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中的参数。请参阅jqGrid文档中的详细信息。

而且我修改了您的演示。你可以在这里看到它。我建议您删除不推荐使用的 imgpath参数。相反，我建议您使用height: 'auto'它在大多数情况下都能获得良好的效果。代替jQuery('#pager')使用更好'#pager'。如果width使用pager和，则应另外增加某些列的的值viewrecords: true。我在演示中包含了以下jQuery("#pager_left").hide();语句，该语句隐藏了您现在不使用的寻呼机的某些块。如果您将开始使用导航器按钮，则应删除该行。

关于您使用的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）。如果按页面顺序（每页10个项目）订购数据（5个项目），则将有20页（总计= 20），从那里开始的第一页（页面= 1）将填充数据（6个项目）。在您的JSON数据中page，total以及records来自JSON数据的奇异值会跟随到演示中的寻呼机中：

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