jqGrid не загружает данные

Question

Я уверен, что это что-то простое, что мне не хватает, но я просто не могу найти это.У меня есть простой jqGrid, указанный здесь:

$('#mainGrid').jqGrid({
    datatype: 'local',
    colNames: ['id', 'name'],
    colModel: [
        { name: 'id', index: 'id', width: 100 },
        { name: 'name', index: 'name', width: 300 }
    ],
    rowNum: 9999,
    sortname: 'name',
    viewrecords: true,
    sortorder: 'asc',
    data: [{"id":"924c18a4-cad6-4b6a-97ef-f9ca61614530","name":"Pathway 1"},{"id":"54897f40-49ab-4abd-acac-6047006c7cc7","name":"Pathway 2"},{"id":"61542c48-102f-4d8e-ba9f-c24c64a20d28","name":"Pathway 3"},{"id":"c4ca9575-7353-4c18-b38a-33b383fcd8b2","name":"Pathway 4"}]
});

Это загружается правильно.Простое доказательство концепции.Теперь я пытаюсь заменить локальные данные вызовом ресурса сервера:

$('#mainGrid').jqGrid({
    url: 'AJAXHandler.aspx',
    datatype: 'json',
    colNames: ['id', 'name'],
    colModel: [
        { name: 'id', index: 'id', width: 100 },
        { name: 'name', index: 'name', width: 300 }
    ],
    rowNum: 9999,
    sortname: 'name',
    viewrecords: true,
    sortorder: 'asc'
});

Ресурс сервера возвращает те же данные.Но сетка не загружает данные.(По крайней мере, он не показывает никаких записей.) Я подтвердил с помощью FireBug, что ресурс действительно вызывается и возвращает ожидаемые данные.

Сначала я подумал, что тип содержимого в ответе ресурса долженизменить на application/json, но это не имело значения.Что-то еще не так с этим ответом, который мешает сетке загрузить данные?

Вывод Firebug для ресурса сервера:

Response Headers
  Cache-Control     private
  Content-Length    261
  Content-Type      text/html; charset=utf-8
  Server            Microsoft-IIS/6.0
  MicrosoftSharePointTeamSe...    12.0.0.6219
  X-Powered-By      ASP.NET
  X-AspNet-Version  2.0.50727
  Set-Cookie        WSS_KeepSessionAuthenticated=80; path=/
  Date              Sat, 23 Apr 2011 14:35:43 GMT

Request Headers
  Host              cyber0ne.com
  User-Agent        Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16
  Accept            application/json, text/javascript, */*; q=0.01
  Accept-Language   en-us,en;q=0.5
  Accept-Encoding   gzip,deflate
  Accept-Charset    ISO-8859-1,utf-8;q=0.7,*;q=0.7
  Keep-Alive        115
  Connection        keep-alive
  X-Requested-With  XMLHttpRequest
  Referer           http://cyber0ne.com/dovetail_pages/Member/Pathways.aspx?MemberID=b428e0a7-dd55-de11-8e97-0016cfe25fa3
  Cookie            WSS_KeepSessionAuthenticated=80

Params
  _search   false
  nd        1303569347783
  page      1
  rows      9999
  sidx      name
  sord      asc

Response
  [{"id":"4d4b8249-b5f9-4da6-aba2-bf3af588d560","name":"Pathway 1"},{"id":"230184e6-44cc-4274-97fd-b455440cd9c0","name":"Pathway 2"},{"id":"7f938218-b963-495f-9646-f3cfb1e63ea1","name":"Pathway 3"},{"id":"2b17f23e-5500-4b01-ac1c-df2de90dc511","name":"Pathway 4"}]

Обновление:

Согласно ответу @Paul Creasey ниже, содержание ответа теперь:

{"total":4,"page":1,"records":4,"rows":[{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"},{"id":"123ba476-1560-4148-ae96-968bdd10e190","name":"Pathway 2"},{"id":"43f5660b-141c-4ccc-848e-6b41667b399a","name":"Pathway 3"},{"id":"b0d21316-d07d-4b46-8011-89c3cb07a8f6","name":"Pathway 4"}]}

Поведение изменилось незначительно.Сетка теперь показывает «Загрузка», но все равно не загружает данные.

Answer 1

Ответ Павла абсолютно верен.Вы должны просто использовать jsonReader : {repeatitems: false}.Я решил написать дополнительную информацию только для того, чтобы очистить , почему jqGrid не смог прочитать ваши исходные данные в начале.Я хочу дополнительно описать, как параметр jsonReader может помочь прочитать данные JSON или XML, возвращаемые с сервера.

Прежде всего вы можете прочитать практически любые входные данные JSON в jqGrid .Вы должны просто определить параметр jsonReader, который описывает как данные должны быть прочитаны.Например, данные в вашем исходном формате могут быть прочитаны jqGrid с учетом следующего jsonReader:

jsonReader: {
    repeatitems: false,
    page: function() { return 1; },
    root: function (obj) { return obj; },
    records: function (obj) { return obj.length; }
}

На вы можете увидеть демонстрационную версию , которая действительно работает.Вы можете прочитать больше об этом в моем старом ответе , где я предложил использовать функции в качестве параметров jsonReader в ситуациях, подобных молодежи.

Почему вообще нужно предоставлять данные втакая странная форма в ответе сервера?Зачем нужен jsonReader?Причина в том, что jqGrid позволяет серверу реализовать сортировку , пейджинг и опционально фильтрацию / поиск .Таким образом, запрос к серверу не похож на «пожалуйста, дайте мне список пользователей», но больше похож на «пожалуйста, сортируйте пользователей по фамилии и получите 5-ю страницу данных, где страница состоит из 10 строк».».Размер страницы (10 в случае) будет получен из выпадающего списка пейджера jwGrid.Параметр массива rowList определяет список возможных значений, и пользователь может выбрать размер страницы, который он / она предпочитает.

Возвращаемые данные должны содержать не только до 10 запрошенных строк данных, но и дерево.дополнительные параметры: «total», «page» и «records», которые описывают некоторые поля, которые будут заполнены в пейджере:

Данные, которые составляют сетку, содержат:являются массивом объектов.Каждый элемент массива содержит информацию об одной строке сетки.Элементом массива может быть либо объект с именованными свойствами, например

{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"}

, либо объект, подобный

{"id":"55132687-b0bd-4c89-97cb-122d127429eb",
 cell:["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]}

, либо массивы, подобные

["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]

Для чтения данных.в первом формате следует использовать jsonReader:{repeatitems:false}.Второй формат по умолчанию, и для чтения данных не нужно определять jsonReader.Чтобы прочитать данные в последнем формате, мы должны определить jsonReader:{cell:''} и дополнительно key:true для столбца id.Последний формат наиболее компактен, но его можно использовать только в том случае, если один из столбцов jqGrid содержит уникальных данных, которые можно интерпретировать как идентификатор.id важен, потому что jqGrid строит HTML-таблицу с элементом <tr>, имеющим точно такой же id, что и пост.Не допускается дублирование идентификатора на одной странице, что соответствует спецификациям HTML.

Последнее замечание.Если вы не можете или не хотите реализовывать разбиение на страницы и сортировку на стороне сервера, вы должны вернуть все данные в ответе сервера и использовать параметр loadonce:true в jqGrid.Это будет следовать за изменением параметра datatype jqGrid на 'local' после первой загрузки данных.После этого сортировка и разбиение на страницы данных будут выполняться внутри JavaScript-кода jqGrid.

Answer 2

Согласно документам здесь ожидаемый формат json:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

Поэтому ваш веб-сервис должен возвращать следующее:

{
    "total": "4",
    "page": "1",
    "records": "4",
    "rows" : [
        {
            "id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560",
            "name": "Pathway 1" 
        },
        {
            "id": "230184e6-44cc-4274-97fd-b455440cd9c0",
            "name": "Pathway 2" 
        },
        {
            "id": "7f938218-b963-495f-9646-f3cfb1e63ea1",
            "name": "Pathway 3" 
        },
        {
            "id": "2b17f23e-5500-4b01-ac1c-df2de90dc511",
            "name": "Pathway 4" 
        } 
    ]
}

Нав тот момент, когда у вас есть только массив строк.

Вы можете реализовать свою собственную функцию для чтения json, но я никогда этого не делал, см. раздел «jsonReader as Function» в ссылке выше.

Редактировать:

Сначала я ошибся, либо вы должны установить флаг repeatitems в значение false:

jsonReader : {
   repeatitems: false
},

и использовать json выше (я думаю!) или вернуть данные следующим образом:

{
    "total": "4",
    "page": "1",
    "records": "4",
    "rows" : [
        {
            "id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560",
            "cells" : ["Pathway 1"]
        },
        {
            "id": "230184e6-44cc-4274-97fd-b455440cd9c0",
            "cells" : ["Pathway 2"]
        },
        {
            "id": "7f938218-b963-495f-9646-f3cfb1e63ea1",
            "cells" : ["Pathway 3"]
        },
        {
            "id": "2b17f23e-5500-4b01-ac1c-df2de90dc511",
            "cells" : ["Pathway 4"] 
        } 
    ]
}

Я всегда делал последнее, но я думаю, что первое, вероятно, лучше!

Answer 3

Я столкнулся с подобной проблемой в моем проекте в Firefox. Я пытаюсь загрузить данные в jqgrid при загрузке страницы. Но я вижу только «Загрузка ...» и никаких данных в сетке.

Я решил это за один шаг. Это может звучать глупо, но это то, что я сделал, чтобы заставить его работать:

Я только что закомментировал тег <script> в моем <head>, который указывает на файл js: jquery.jqGrid.js, так как у меня уже есть другой тег <script>, который указывает на файл js: jquery.jqGrid.min.js

Также вам необходимо убедиться, что порядок ваших скриптов правильный ... сначала загрузите jquery, а затем файлы jqgrid.

Это решило мою проблему с загрузкой данных в Firefox.