2017-11-25 190 views
2

我正在開發codeigniter項目。我試圖在jqgrid中顯示來自json和jquery的一些數據。 Jqgrid顯示除數據以外的所有內容。沒有錯誤或例外。Jqgrid不顯示json的數據

$(document).ready(function(){ 

    $("#company").click(function(){ 

     $("#ortable").hide(); 
     $("#grid").show(); 

     var url = "http://www.***.com"; 
     $.post(url,{},function (response) { 
      var rows = JSON.parse(response); 

      $.each(rows,function (key,row) { 
       var mydata = row; 
       console.log(mydata); //This is for checking data 
      // Configuration for jqGrid Example 1 
       $("#table_list_1").jqGrid({ 
        datastr: mydata, 
        datatype: "json", 
        autoheight: true, 
        width: 320, 
        shrinkToFit: true, 
        rowNum: 5, 
        rowList: [5, 10, 15], 
        colNames: ['Id', 'Code', 'Name'], 
        colModel: [ 
         {name: 'Id', index: 'Id', width: 30}, 
         {name: 'Code', index: 'Code', width: 50}, 
         {name: 'Name', index: 'Name', width: 50, sortable: false} 
        ], 
        pager: "#pager_list_1", 
        viewrecords: true, 
        caption: "Example jqGrid 1", 
        gridview: true, 
        autoencode: true, 
        hidegrid: false, 
        jsonReader: { 
         repeatitems: false, 
         id: "Id", 
         root: function (obj) { return obj; }, 
         page: function (obj) { return 1; }, 
         total: function (obj) { return 1; }, 
         records: function (obj) { return obj.length; } 
        } 

       }); 

      // Add responsive to jqGrid 
       $(window).bind('resize', function() { 
        var width = $('.jqGrid_wrapper').width(); 
        $('#table_list_1').setGridWidth(width); 
       }); 
      }) 
     }); 

    }); 

    $("#group").click(function(){ 

     $("#grid").hide(); 
     $("#ortable").show(); 
    }) 

    $("#menu").click(function(){ 
     $("#myModal").modal("show"); 

    }); 
}); 

有了這個代碼工作得很好:

var mydata = [ 
    {Id: "1", Code: "test", Name: "note" } , 
    {Id: "2", Code: "test2", Name: "note2" }]; 

但不是這樣的:JSON:

[{"Id":1,"Code":"ASC","Name":"Aslan \u00c7imento","Address1":"Konya","Address2":" ","City":"Konya","Town":" ","PostCode":"123","Tel1":" ","Tel2":"32434","ContactName":"ASC","ContactTel1":"423432","Email":"[email protected]","TaxNumber":"2342423","TaxAdministration":"ddsef","IBAN1":"21321312","IBAN2":" ","TCNo":" ","Kep":"[email protected]","SskNo":"2324234234","Bank1":"safsefes","Bank2":" "},{"Id":2,"Code":"OYT","Name":"Oyta\u015f A.\u015e.","Address1":"Ankara","Address2":"Ankara","City":"Ankara","Town":" ","PostCode":" ","Tel1":"Ankara","Tel2":"32424","ContactName":"oyt","ContactTel1":"345345","Email":"[email protected]","TaxNumber":"43543","TaxAdministration":"5435","IBAN1":"453453454","IBAN2":" ","TCNo":" ","Kep":"[email protected]","SskNo":"345","Bank1":"sadfds","Bank2":"dsfsdf"}] 

我可以閱讀從控制檯我的數據,但不能在jqGrid的。我究竟做錯了什麼?

回答

0

請寫出你總是使用的jqGrid的的版本並從其中的jqGrid的free jqGrid,商業Guriddo jqGrid JS或舊的jqGrid在< = 4.7版本)。

選項datatype: "json"結合datastr: mydata。您可以使用datastr結合datatype: "jsonstring"data: mydata結合datatype: "local"。如果您不需要明確阻止本地數據分類,則應使用datatype: "local"並通過data參數指定輸入數據。在使用 「自由jqGrid的」 叉的情況下,可以跳過datatype: "local"

colModel: [ 
    {name: 'Id', key: true, width: 30}, 
    {name: 'Code', width: 50}, 
    {name: 'Name', width: 100, sortable: false} 
], 
data: mydata 

https://jsfiddle.net/OlegKi/vc2v9aLw/。您可以使用datatype: "jsonstring"或者:

colModel: [ 
    {name: 'Id', key: true, width: 30}, 
    {name: 'Code', width: 50}, 
    {name: 'Name', width: 100, sortable: false} 
], 
datatype: "jsonstring", 
datastr: mydata, 
jsonReader: { id: "Id" } 

https://jsfiddle.net/OlegKi/stvsxsts/。有關免費jqGrid使用情況的更多基礎信息可以在here找到。兩個網格顯示

enter image description here

+0

這比我想象的要快。工作很好,謝謝。 – otosturop

+0

@otosturop:不客氣! – Oleg