JQuery网格不显示数据 - 显示空网格

时间:2011-05-24 13:12:43

标签: jquery jquery-ui

有人可以帮助我使用jQuery插件jqGrid吗?我下载了jqGrid 4.4.5并输入了代码

 <script>
        $(document).ready(function() {
             jQuery("#list2").jqGrid({ url:'test.json', datatype: "json", colNames:['Inv No','Date'], colModel:[ {name:'id',index:'id', width:55}, {name:'date',index:'date', width:90}], rowNum:10, rowList:[10,20,30], pager: '#pager2', sortname: 'id', viewrecords: true, sortorder: "desc", caption:"USERS" }); jQuery("#list2").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});

        });
    </script>

我在我的html表中

  <table id="list2"></table>
  <div id="pager2"></div>

我有test.json喜欢

[
    {
        "id": 3,
        "date": ""
    },
    {
        "id": 2,
        "date": "1"
    },
    {
        "id": 3,
        "date": ""
    }
]

但是当我加载页面时,我没有得到网格中的任何数据,就像在图片enter image description here上一样。

有人能指出我做错了吗?

1 个答案:

答案 0 :(得分:1)

JQgrid太棒了!但文档不是很好......

在你的情况下,问题是Json数据......如果你在JSON DATA部分中查看here,那么你会发现你试图使用的Json对JQGrid无效......

必须遵守以下格式:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

检查链接并阅读beacause不是太简单......