jqGrid 没有显示我的数据？

Question

这就是我的数据的结构：

[
  {
    "email": "ww@ww.com",
    "name": "ww",
    "password": "qLfsebHMKv7dNgExtR",
    "active": false,
    "role": "admin",
    "createdAt": "2013-10-22T11:48:32.719Z",
    "updatedAt": "2013-10-22T11:48:32.719Z",
    "id": "52666610a6a311308b000001"
  },
  {
    "email": "qq@qq.com",
    "name": "QQ",
    "password": "twfubGHoQkYDVup",
    "active": true,
    "role": "expert",
    "createdAt": "2013-10-22T11:38:47.578Z",
    "updatedAt": "2013-10-22T11:38:47.578Z",
    "id": "526663c788101c9f89000001"
  }
]

这是我的 js：

$(function () {
    $('#list').jqGrid({
      url: '/api/v1/users',
      datatype: 'json',
      mtype: 'GET',
      colNames: ['id','email','name', 'password', 'active','role','createdAt','updatedAt'],
      colModel: [
      { name: 'id', width: 80 },
      { name: 'email', width: 80 },
      { name: 'name', width: 80, align: 'right' },
      { name: 'password', width: 80, align: 'right' },
      { name: 'active', width: 80, align: 'right' },
      { name: 'role', width: 80, align: 'right' },
      { name: 'createdAt', width: 80, align: 'right' },
      { name: 'updatedAt', width: 80, sortable: 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; }
      },
      pager: '#pager',
      rowNum: 10,
      rowList: [10, 20, 30],
      sortname: 'invid',
      sortorder: 'desc',
      viewrecords: true,
      gridview: true,
      autoencode: true,
      caption: 'My first grid'
    }); 
  }); 

我根本无法让它工作，更糟糕的是禁用整个页面！。 我在这里想念什么？

---

更新 1： 我补充说：

  loadComplete: function (data) {
    console.log("OK");
    console.log(data);
  },
  loadError: function (jqXHR, textStatus, errorThrown) {
    console.log('HTTP status code: ' + jqXHR.status + 'n' +
    'textStatus: ' + textStatus + 'n' +
    'errorThrown: ' + errorThrown);
    console.log('HTTP message body (jqXHR.responseText): ' + 'n' + jqXHR.responseText);
  }

loadComplete 总是返回OK，然而，data 是一个空数组[]。

---

更新 2： 我检查了 jqGrid 发送的请求，它似乎将它附加到我的 API：

/api/v1/users?_search=false&nd=1384254700817&rows=20&page=1&sidx=&sord=asc

当我点击这个 url 时，它会返回那个 empty 数组。知道如何改变这种行为吗？

Answer 1

在加载/加载网格时禁用页面意味着存在一些 CSS 问题。

首先，检查你是否添加了 ui.jqgrid.css 。在不包含的情况下可能会发生阻塞。

你能点击网址吗？

您的网格中的另一个错误是：Sortname。根据您的列模型，您指定了“invid'”，这是一个无效的列名。

所以，纠正它。如果您使用的是最新版本的 Jqgrid。无需包含以下代码：

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

你可以忽略上面的代码。Jqgrid 会处理它。

如果你需要用户排序和分页，那么你需要指定LoadOnce:true。

这将使您的网格数据成为本地数据，并且可以进行排序和分页。

如果你没有指定，那么你需要处理排序、过滤和分页。

希望这有帮助...

**UPdated:**


[
  {
    "email": "ww@ww.com",
    "name": "ww",
    "password": "qLfsebHMKv7dNgExtR",
    "active": "false",
    "role": "admin",
    "createdAt": "2013-10-22T11:48:32.719Z",
    "updatedAt": "2013-10-22T11:48:32.719Z",
    "id": "52666610a6a311308b000001"
  },
  {
    "email": "qq@qq.com",
    "name": "QQ",
    "password": "twfubGHoQkYDVup",
    "active":"true",
    "role": "expert",
    "createdAt": "2013-10-22T11:38:47.578Z",
    "updatedAt": "2013-10-22T11:38:47.578Z",
    "id": "526663c788101c9f89000001"
  }
]