试图将简单的json加载到jQGrid中

时间:2014-01-22 16:06:57

标签: jquery jqgrid

好吧因此我试图使用jqgrid将一些简单的json数据加载到html表中。我看到一些帖子提到使用jsonreader选项,但我找不到如何正确实现它的文档。我觉得这会非常简单! anywahy页面是 http://thethunderdome.hfbsite.com/economy/test.htm

js code:

    $(function(){
    var pricesUrl = "/economy/prices3.txt"

    jQuery("#pricetable").jqGrid({
        url:pricesUrl,
        datatype: "json",
        colNames:['Item Name','Price', 'Trade Status'],
        colModel:[
            {name:'Name', width:100},
            {name:'Price', width:90},
            {name:'Trade',width:100},       
        ],

        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'Name',
        viewrecords: true,
        sortorder: "asc",
        caption:"JSON Example"
    });

});

json数据:

    [
   {
      "Price":"5",
      "Name":"Wood",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Sulfur Ore",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Raw Chicken Breast",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Cloth",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Metal Ore",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Stones",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Animal Fat",
      "Trade":"all"
   },
   {
      "Price":"12500",
      "Name":"M4",
      "Trade":"all"
   },
      "Price":"9000",
      "Name":"Shotgun",
      "Trade":"all"
   },
      "Price":"500",
      "Name":"Small Medkit",
      "Trade":"all"
   },
   }
      "Price":"1000",
      "Name":"Large Medkit",
      "Trade":"all"
   },
]

1 个答案:

答案 0 :(得分:2)

您发布的数据不是正确的JSON数据。如果您查看数据的最后一部分,您将看到

[
   ...
   {
      "Price":"12500",
      "Name":"M4",
      "Trade":"all"
   },                       ---- where {
      "Price":"9000",
      "Name":"Shotgun",
      "Trade":"all"
   },                       ---- where {
      "Price":"500",
      "Name":"Small Medkit",
      "Trade":"all"
   },
   }                        ---- why } ??? one need {
      "Price":"1000",
      "Name":"Large Medkit",
      "Trade":"all"
   },                       ---- why , is here ???
]

我建议您验证http://www.jsonlint.org/上的JSON数据。

修复数据并将其加载正确后,我建议您添加loadonce: true选项,因为您可能希望一次加载所有数据并且不实现服务器端分页,排序和过滤/搜索。还建议使用其他选项gridview: trueautoencode: true