問題顯示jqgrid動態列綁定

Question

我想從struts行爲傳遞colModel和列。就像在問題 jqGrid and dynamic column binding

我不知道我缺少什麼。請幫忙。花了相當一段時間試圖讓它正確。

的jsp：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $.ajax( 
    { 
    type: "POST",   
    url: "interFinalTbaAction.action",   
    data: "",   
    dataType: "json",   
    success: function(result){    
     colD = result.couponStripList;    
    colN = result.columnNames;    
    colM = result.colModelList; 

     jQuery("#dataGrid").jqGrid({ 
     jsonReader : { 
       repeatitems: false, 
       root:"rootVar", 
       cell: "", 
       id: "0" 
      }, 

     url: 'SomeUrl/Getdata',     
     datatype: 'jsonstring',     
     mtype: 'POST',     
     datastr : colD,     
     colNames:colN,     
     colModel :colM,     
     loadComplete: function(data){alert('loaded');},     
     loadError: function(xhr,status,error){ 
     alert('error'); 
     }    
    })   
},   
    error: function(x, e){ 
    alert(x.readyState + " "+ x.status +" "+ e.msg);    
    }  
}); 
}); 
</script> 

<h2>Inter Final Prices</h2> 
<table id="dataGrid"> 
</table> 
</html> 

，我的行動retuns的JSON是

  { 
"colModelList": [ 
    { 
     "index": "prceCM", 
     "jsonmap": null, 
     "key": false, 
     "name": "prceCM", 
     "resizeable": true, 
     "search": true, 
     "sortable": false, 
     "title": "03-01-11", 
     "width": 300 
    }, 
    { 
     "index": "prceCMPlusOne", 
     "jsonmap": null, 
     "key": false, 
     "name": "prceCMPlusOne", 
     "resizeable": true, 
     "search": true, 
     "sortable": false, 
     "title": "04-01-11", 
     "width": 300 
    }, 
    { 
     "index": "prceCMPlusTwo", 
     "jsonmap": null, 
     "key": false, 
     "name": "prceCMPlusTwo", 
     "resizeable": true, 
     "search": true, 
     "sortable": false, 
     "title": "05-01-11", 
     "width": 300 
    }, 
    { 
     "index": "prceCMPlusThree", 
     "jsonmap": null, 
     "key": false, 
     "name": "prceCMPlusThree", 
     "resizeable": true, 
     "search": true, 
     "sortable": false, 
     "title": "06-01-11", 
     "width": 300 
    }, 
    { 
     "index": "coupon", 
     "jsonmap": null, 
     "key": false, 
     "name": "coupon", 
     "resizeable": true, 
     "search": true, 
     "sortable": false, 
     "title": null, 
     "width": 300 
    } 
    ], 
    "columnNames": [ 
    "prceCM", 
    "prceCMPlusOne", 
    "prceCMPlusTwo", 
    "prceCMPlusThree", 
    "coupon" 
    ], 
    "couponStripList": { 
    "rootVar": [ 
     { 
      "coupon": 5.0, 
      "prceCM": "Not Available", 
      "prceCMPlusOne": "Not Available", 
      "prceCMPlusThree": "Not Available", 
      "prceCMPlusTwo": "Not Available" 
     }, 
     { 
      "coupon": 5.5, 
      "prceCM": "Not Available", 
      "prceCMPlusOne": "Not Available", 
      "prceCMPlusThree": "Not Available", 
      "prceCMPlusTwo": "Not Available" 
     }, 
     { 
      "coupon": 6.0, 
      "prceCM": "Not Available", 
      "prceCMPlusOne": "Not Available", 
      "prceCMPlusThree": "Not Available", 
      "prceCMPlusTwo": "Not Available" 
     }, 
     { 
      "coupon": 6.5, 
      "prceCM": "Not Available", 
      "prceCMPlusOne": "Not Available", 
      "prceCMPlusThree": "Not Available", 
      "prceCMPlusTwo": "Not Available" 
     }, 
     { 
      "coupon": 7.0, 
      "prceCM": "Not Available", 
      "prceCMPlusOne": "Not Available", 
      "prceCMPlusThree": "Not Available", 
      "prceCMPlusTwo": "Not Available" 
     } 
    ] 
    }, 
    "deliveredDataTimestamp": null, 
    "requestedTimestamp": null 
} 

感謝。

Answer 1

在我的測試your code工作。儘管如此，因爲你的問題的主題對許多jqGrid用戶來說很有趣，所以我決定在你的代碼和JSON數據中寫一些小錯誤和優化。

第一個也是最重要的問題是項目的ID。 jsonReader裏面的設置id:"0"是錯誤的。僅當數據項是數組而不是具有命名屬性的對象時纔可使用它（repeatitems:false）。目前作爲行的ID將被使用整數1,2，...我強烈建議你在JSON數據的rootVar項中包含ID信息。

下一個問題。財產"title": "03-01-11"是錯誤的。 colModel的"title"屬性爲布爾型，所以應該更改爲"title": true。關閉問題：您使用的屬性resizable作爲resizeable，這在英語中可能更正確，但jqGrid將忽略它。

現在小的優化：

1. 您可以從datatype:'jsonstring', datastr:colD改變datatype: 'local', data: colD.rootVar
2. 添加gridview: true參數。
3. 設置url: 'SomeUrl/Getdata'和mtype: 'POST'在datatype:'jsonstring'或datatype:'local'的情況下將被忽略。所以你應該刪除jqGrid的參數。
4. 由於jsonmap將不會在您的數據模型中使用，我建議您將其從JSON數據中刪除。
5. 在我看來，最好使用colModel的其他label財產。在這種情況下，您不再需要colNames（columnNames在您的數據中）。

原來你的演示中，你可以看到here（我僅由type更改到`類型：「GET」怎麼一回事，因爲我沒有主動服務器組件和保存的JSON爲文本文件）。我建議的修改後的相同演示是here。

方式的主要限制是所有數據將是本地。所以你可以使用本地排序，過濾和分頁，但如果你想要有服務器端排序，過濾和分頁，你必須在你的jqGrid中包含更多的附加代碼。

生成的代碼，我建議你的是：

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "DynamicColumnBinding1.txt", 
     dataType: "json", 
     success: function(result){ 
      var colD = result.couponStripList, 
       colM = result.colModelList; 

      $("#dataGrid").jqGrid({ 
       datatype: 'local', 
       data: colD.rootVar, 
       gridview: true, 
       colModel :colM, 
       height: "auto", 
       loadComplete: function(data){ 
        alert('loaded'); 
       }, 
       loadError: function(xhr,status,error){ 
        alert('error'); 
       } 
      }); 
     }, 
     error: function(x, e){ 
      alert(x.readyState + " "+ x.status +" "+ e.msg); 
     } 
    }); 
}); 

相應的JSON數據可以是例如以下

{ 
    "colModelList": [ 
     { 
      "index": "prceCM", 
      "label": "CM", 
      "name": "prceCM", 
      "width": 100 
     }, 
     { 
      "index": "prceCMPlusOne", 
      "label": "CM + 1", 
      "name": "prceCMPlusOne", 
      "width": 100 
     }, 
     { 
      "index": "prceCMPlusTwo", 
      "label": "CM + 2", 
      "name": "prceCMPlusTwo", 
      "width": 100 
     }, 
     { 
      "index": "prceCMPlusThree", 
      "label": "CM + 3", 
      "name": "prceCMPlusThree", 
      "width": 100 
     }, 
     { 
      "index": "coupon", 
      "label": "Coupon", 
      "name": "coupon", 
      "align": "right", 
      "sorttype": "number", 
      "formatter": "number", 
      "formatoptions": { 
       "thousandsSeparator": "," 
      }, 
      "width": 100 
     } 
    ], 
    "columnNames": [ 
     "prceCM", 
     "prceCMPlusOne", 
     "prceCMPlusTwo", 
     "prceCMPlusThree", 
     "coupon" 
    ], 
    "couponStripList": { 
     "rootVar": [ 
      { 
       "id": 71, 
       "coupon": 5.0, 
       "prceCM": "Not Available", 
       "prceCMPlusOne": "Not Available", 
       "prceCMPlusThree": "Not Available", 
       "prceCMPlusTwo": "Not Available" 
      }, 
      { 
       "id": 72, 
       "coupon": 5.5, 
       "prceCM": "Not Available", 
       "prceCMPlusOne": "Not Available", 
       "prceCMPlusThree": "Not Available", 
       "prceCMPlusTwo": "Not Available" 
      }, 
      { 
       "id": 73, 
       "coupon": 6.0, 
       "prceCM": "Not Available", 
       "prceCMPlusOne": "Not Available", 
       "prceCMPlusThree": "Not Available", 
       "prceCMPlusTwo": "Not Available" 
      }, 
      { 
       "id": 74, 
       "coupon": 6.5, 
       "prceCM": "Not Available", 
       "prceCMPlusOne": "Not Available", 
       "prceCMPlusThree": "Not Available", 
       "prceCMPlusTwo": "Not Available" 
      }, 
      { 
       "id": 75, 
       "coupon": 7.0, 
       "prceCM": "Not Available", 
       "prceCMPlusOne": "Not Available", 
       "prceCMPlusThree": "Not Available", 
       "prceCMPlusTwo": "Not Available" 
      } 
     ] 
    }, 
    "deliveredDataTimestamp": null, 
    "requestedTimestamp": null 
}