jQgrid：數據未加載

Question

我想使用jQgrid，但表格無法加載數據。背景中有一些透明的黑塊UI。我收到的JSON響應是：

  {"total":"1","page":"1","records ":"10", 
     "rows":[ 
     {"id":"26010","cell":[26010,303,100,""]}, 
     {"id":"26009","cell":[26009,303,100,""]}, 
     {"id":"26008","cell":[26008,303,100,""]}, 
     {"id":"26007","cell":[26007,303,100,""]}, 
     {"id":"26006","cell":[26006,303,100,""]}, 
     {"id":"26005","cell":[26005,303,100,""]}, 
     {"id":"26004","cell":[26004,303,100,""]}, 
     {"id":"26003","cell":[26003,303,100,""]}, 
     {"id":"26002","cell":[26002,303,100,""]}, 
     {"id":"26001","cell":[26001,303,100,""]}]} 

頁：

<table id="list3"></table> 
<div id="pager3"></div> 
<table id="navgrid"></table> 
<div id="pagernav"></div> 
<script> 
$(document).ready(function(){ 
$("#list3").jqGrid({ 
     url:'<%=getForecastedTransactionURL%>', 
     mtype:'POST', 
     datatype : 'json', 
     colNames : [ 'Txn Id', 'Transaction Type', 'Amount', 'Description'], 
     colModel : [ { 
      name : 'id', 
      index : 'id', 
      sorttype : "int", 
      hidden:true 
     }, { 
      name : 'transactionType', 
      index : 'transactionType', 
      width : 100 
     }, { 
      name : 'amount', 
      index : 'amount', 
      width : 80, 
      align : "right", 
      sorttype : "number" 
     }, { 
      name : 'description', 
      index : 'description', 
      width : 80, 
      align : "right", 
      sorttype : "text" 
     }], 
     multiselect : true, 
     rowNum : 20, 
     rowList : [ 10, 20, 30 ], 
     pager : '#pager3', 
     sortname : 'transactionType', 
     viewrecords : true, 
     sortorder : "desc", 
     loadonce : true, 
     caption : "Load Once Example" 
    }); 
}); 
</script> 

有什麼我失蹤？

Answer 1

您使用的JavaScript代碼是正確的，它對應於從服務器返回的JSON數據。 The demo表明該代碼應該工作。在演示中，我只做了很小的修改（增加了height: "auto", gridview: true選項，增加了description列的寬度，以便更清楚地看到尋呼機中的結果。我僅僅因爲我的演示程序根據HTTP GET從文件中直接加載數據而刪除了mtype:'POST'）。我建議你比較你的演示與我的。此外，我建議您使用loadError回調（請參閱the answer），這可以幫助診斷加載電網期間的錯誤。我希望錯誤描述能幫助你在你的代碼中找到錯誤。 HTTP響應的典型錯誤可能是錯誤的Content-Type。

我建議你的其他小型優化如下。您當前在服務器上生成的JSON格式包含許多不需要的信息和重複的id信息。你包括目前隱藏的id列，這是不是真的需要。 jqGrid的每一行都有id屬性。您可以使用該值而不是使用不需要的隱藏列。例如，你可以改變您的代碼以產生所述數據

[ 
    [303,100,"",26010], 
    [303,100,"",26009], 
    [303,100,"",26008], 
    [303,100,"",26007], 
    [303,100,"",26006], 
    [303,100,"",26005], 
    [303,100,"",26004], 
    [303,100,"",26003], 
    [303,100,"",26002], 
    [303,100,"",26001] 
] 

添加jsonReader選項，並更改colModel到

colModel : [{ 
    name : 'transactionType', 
    width : 100 
}, { 
    name : 'amount', 
    width : 80, 
    align : "right", 
    sorttype : "number" 
}, { 
    name : 'description', 
    width : 280, 
    align : "right" 
}], 
jsonReader: {id: 3} 

這種jsonReader指定項目陣列的3個元素是id值。因此，您將擁有與上一個演示完全相同的網格（請參閱新演示here）。下圖顯示rowid仍然正確設置