试图加载简单的json到jQGrid

Question

好吧，所以我试图用jqgrid加载一些简单的json数据到一个html表中。我已经看到一些使用jsonreader选项提到的帖子，但我无法找到如何正确实施它的文档。我以为这会超级简单！ anywahy页面是 http://thethunderdome.hfbsite.com/economy/test.htm

JS代码：

$(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" 
    }, 
] 

Answer 1

您发布的数据是不正确的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: true和autoencode: true也被推荐。