試圖加載簡單的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也被推薦。