jqGrid kann keine Daten anzeigen

Question

Ich verwende jqGrid, aber ich kann keine Daten laden. Hier ist mein Code:

var data = { 
    "rows": [ 
    { 
     "OrderID": "10266", 
     "FromDate": "1996-07-26", 
     "CustomerID": "WARTH", 
     "ShipName": "Wartian Herkku", 
     "ToDate": "1996-07-29" 
    }, { 
     "OrderID": "10267", 
     "FromDate": "1996-07-29", 
     "CustomerID": "FRANK", 
     "ShipName": "Frankenversand", 
     "ToDate": "1996-08-02" 
    }, 
    // many more objects... 
    ] 
} 

$(document).ready(function() { 
    $("#jqGrid").jqGrid({ 
    url: "index.jsp", 
    data: data, 
    datatype: "json", 
    styleUI: "Bootstrap", 
    colModel: [{ 
     label: 'Order ID', 
     name: 'OrderID', 
     key: true, 
     width: 75, 
     hidden: true 
    }, { 
     label: 'From Date', 
     name: 'FromDate', 
     width: 150, 
     editable: true, 
     edittype: "text", 
     id: "ui-datepicker-div", 
     editoptions: { 
     dataInit: function(element) { 
      $(element).datepicker({ 
      autoclose: true, 
      format: 'yyyy-mm-dd', 
      orientation: 'auto bottom' 
      }); 
     }, 

     }, 
    }, { 
     label: 'To Date', 
     name: 'ToDate', 
     width: 150, 
     editable: true, 
     edittype: "text", 
     editoptions: { 
     dataInit: function(element) { 
      $(element).datepicker({ 
      autoclose: true, 
      format: 'yyyy-mm-dd', 
      orientation: 'auto bottom' 
      }); 
     }, 

     }, 
    }, { 
     label: 'Customer ID', 
     name: 'CustomerID', 
     width: 150 
    }, { 
     label: 'Ship Name', 
     name: 'ShipName', 
     width: 200 
    }, { 
     label: 'Row Data', 
     name: 'RowData', 
     align: 'center', 
     formatter: function() { 
     return "<img src='resources/icon.jpg' onclick='OpenDialog(this)' alt='Data Row' />"; 
     width = 15; 
     } 
    }, ], 
    loadonce: true, 
    onSelectRow: editRow, 
    viewrecords: true, 
    editurl: "JqGridServlet", 
    width: 780, 
    height: 200, 
    rowNum: 20, 
    rowList: [20, 30, 50], 
    rownumbers: true, 
    rownumWidth: 25, 
    multiselect: true, 
    pager: "#jqGridPager", 
    loadComplete: function() { 
     var $this = $(this), 
     ids = $this.jqGrid('getDataIDs'), 
     i; 
     for (i = 0; i < ids.length; i++) { 
     $this.jqGrid('editRow', ids[i]); 
     } 

    } 
    }); 
    $('#jqGrid').navGrid("#jqGridPager", { 
    edit: false, 
    add: true, 
    del: false, 
    refresh: true, 
    view: false 
    }); 

}); 

Wenn ich legte Daten in einer externen Datei funktioniert es, aber wenn ich es vor Ort setzen, wie oben, es funktioniert nicht. Jede Hilfe wäre willkommen.

Answer 1

Da Sie Daten lokal laden, müssen Sie die Eigenschaft url entfernen. Sie müssen auch dataType auf local setzen und das data.rows-Array direkt an die data-Eigenschaft senden. Versuchen Sie dies:

$("#jqGrid").jqGrid({ 
    data: data.rows, 
    datatype: 'local', 
    // the rest of your code...