的jqGrid取出JSON但空行，沒有數據

Question

JSON作爲由彈簧3 MVC @ResponseBody

{ 
    "total": "1", 
    "page": "1", 
    "records": "2", 
    "rows": [ 
     { 
      "id": "1", 
      "cell": { 
       "accountId": 1, 
       "userId": 1, 
       "transactionId": 6, 
       "subCatId": 0, 
       "accountName": "Credit Card", 
       "remarks": "Movie Hall Pass", 
       "amount": 250.0, 
       "transactionDate": "2011-03-16", 
       "subCatName": "Entertainment" 
      } 
     }, 
     { 
      "id": "2", 
      "cell": { 
       "accountId": 2, 
       "userId": 1, 
       "transactionId": 7, 
       "subCatId": 1, 
       "accountName": "Savings Bank", 
       "remarks": "Part at Besand Nagar", 
       "amount": 5000.0, 
       "transactionDate": "2011-03-16", 
       "subCatName": "Dine Out" 
      } 
     } 
    ] 
} 

的jqGrid初始化代碼生成：

$("#transactionLogTable").jqGrid({ 
       url: '/et/transaction/getTransactions?dateValue=03%2F16%2F2011', 
       datatype: "json", 
       loadError: function(xhr,status,error){alert(status+" "+error);}, 
       colNames:['Transaction ID', 'User ID', 'Subcat ID', 'Subcat Name', 
          'Account ID', 'Account Name', 'Date', 'Amount', 'Notes'], 

       colModel:[ 
        {name: 'transactionId', index: 'transactionId', width: 100}, 
        {name: 'userid', index: 'userId', width: 100}, 
        {name: 'subCatId', index: 'subCatId', width: 100}, 
        {name: 'subCatName', index: 'subCatName', width: 100}, 
        {name: 'accountId', index: 'accountId', width: 100}, 
        {name: 'accountName', index: 'accountName', width: 100}, 
        {name: 'transactionDate', index: 'transactionDate', width: 100}, 
        {name: 'amount', index: 'amount', width: 100}, 
        {name: 'remarks', index: 'remarks', width: 100} 
       ], 
       pager: "#pager", 
       rowNum: 10, 
       rowList: [10,20,30], 
       sortname: 'userId', 
       sortorder: 'asc', 
       viewrecords: true, 
       caption: 'Transactions' 
      }); 

的服務器被QueryString成功命中爲：

dateValue=03%2F16%2F2011&_search=false&nd=1300532086871&rows=10&page=1&sidx=userId&sord=asc 

現在好了，我得到一個屏幕，它顯示了jqGrid和2個空行。我無法顯示行內的數據。

我想這是與映射有關的東西，但我嘗試了儘可能多的組合。

包含的文件和版本：

<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery-ui-1.8.10.start/js/jquery-ui-1.8.10.custom.min.js"></script> 
<script type="text/javascript" language="javascript" src="/et/resources/js/form-2.52.js"></script> 
<script type="text/javascript" language="javascript" src="/et/resources/js/validate-1.7.js"></script> 
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/i18n/grid.locale-en.js" charset="utf-8"></script> 
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery.jqGrid.min.js"></script> 

感謝你的幫助。

Firdous Amir

Answer 1

您的主要錯誤是數據格式錯誤。您應該使用的

{ 
    "total": "1", 
    "page": "1", 
    "records": "2", 
    "rows": [ 
     { 
      "id": "1", 
      "cell": ["1", "1", "6", "0", "Credit Card", "Movie Hall Pass", 
        "250.0", "2011-03-16", "Entertainment" ] 
     }, 
     ... 
    ] 
} 

代替

{ 
    "total": "1", 
    "page": "1", 
    "records": "2", 
    "rows": [ 
     { 
      "id": "1", 
      "cell": { 
       "accountId": 1, 
       "userId": 1, 
       "transactionId": 6, 
       "subCatId": 0, 
       "accountName": "Credit Card", 
       "remarks": "Movie Hall Pass", 
       "amount": 250.0, 
       "transactionDate": "2011-03-16", 
       "subCatName": "Entertainment" 
      } 
     }, 
     ... 
    ] 
} 

一般的jqGrid是足夠的靈活性，幾乎讀取任何JSON數據。您只需在列定義中定義jsonReader jqGrid參數，另外還可以定義jsonmap屬性。在你的情況，例如一個可以用下面的jqGrid定義

$("#transactionLogTable").jqGrid({ 
    // ... other parameters 
    cmTemplate: {width: 100}, 
    colModel:[ 
     {name:'transactionId', jsonmap: 'cell.transactionId'}, 
     {name:'userId',   jsonmap: 'cell.userId'}, 
     {name:'subCatId',  jsonmap: 'cell.subCatId'}, 
     {name:'subCatName',  jsonmap: 'cell.subCatName'}, 
     {name:'accountId',  jsonmap: 'cell.accountId'}, 
     {name:'accountName',  jsonmap: 'cell.accountName'}, 
     {name:'transactionDate', jsonmap: 'cell.transactionDate'}, 
     {name:'amount',   jsonmap: 'cell.amount'}, 
     {name:'remarks',   jsonmap: 'cell.remarks'} 
    ], 
    height: "auto", 
    jsonReader: { repeatitems: false } 
}); 

在這裏，我用jsonReader: { repeatitems: false }定義的行JSON數據讀取你的數據不是數組，但對於命名屬性的對象。需要像jsonmap: "cell.userId"這樣的屬性來指定相應網格列的值不應該是行對象的默認userId屬性，而是另外是「單元」屬性的子節點。順便說一下，在JSON數據中使用'userid'作爲列名和'userId'。最好使用與JSON數據相同的名稱。在你使用與'name'相同的'index'屬性時，你可以刪除'index'。在'name'屬性的值將被用作'索引'的情況下。

因爲您對網格的所有列使用了「width：100」屬性，所以我使用cmTemplate: {width: 100}參數使colModel定義更短且更易於閱讀。

您可以看到修改後的網格生效here。

我建議你還總是發佈日期的ISO格式YYYY-MM-DD和使用colModelformatter:'date'和datefmt屬性（例如formatter:'date', formatoptions:{newformat:'d-m-Y'}, datefmt: 'd-m-Y'）