0

This is how my data is structured: 

[
  {
    "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"
  }
]

and this is my 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'
    }); 
  });

I could not get that to work at all, even worse that disable the whole page!. What am I missing here?

Update 1: I added: 

  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 always returns OK, however, data is an empty array [].

Update 2: I inspected the request jqGrid sends and it apear it appends this to my API: 

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

When I hit this url it does return that empaty array. Any idea how to change this behaviour?

4

1 回答 1

0

Disabling you Page when Grid is loading/loaded means there is some CSS Problem.

First, Check whether you have added ui.jqgrid.css . The blocking may happen in the case of not inlcuding it.

Are u able to hit URL?

The another mistake in your grid is: Sortname . you have specified 'invid' which is an invalid column name according to your Column Model.

So, Correct it. If you are using latest version of Jqgrid. There is no need to include following code:

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

You can Just Ignore above code.. Jqgrid will take care of it.

If you need to user Sorting and Paging, then you need to Specify LoadOnce:true.

This will make your grid data as local and sorting and paging works .

If you are not Specifying , then you need to take care of sorting,filtering and paging.

Hopw this helps...

**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"
  }
]
于 2013-11-12T07:47:28.187 回答