jqGrid无法显示数据

时间:2016-05-03 10:45:51

标签: javascript jquery jqgrid

我正在使用jqGrid,但我无法加载数据。这是我的代码:

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
  });

});

当我将数据放入外部文件时它可以工作,但是当我把它放在本地时,如上所述,它没有。任何帮助,将不胜感激。

1 个答案:

答案 0 :(得分:0)

当您在本地加载数据时,您需要删除url属性。您还需要将dataType设置为local,并将data.rows数组直接提供给data属性。试试这个:

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