Цикл статей «Документация jqGrid на русском».
Следующая статья — «Строка с JSON в jqGrid».
Предыдущая статья — «JqGrid. Заметки и ограничения использования XML-данных».
Начиная с версии 3.6.5 возвращённая JSON-строка должна быть корректной JSON-строкой.
Для получения большей информации обратитесь сюда и сюда.
Данные в формате JSON обрабатываются очень похоже на данные в формате XML. Очень важно, чтобы определение в jsonReader совпадало с получаемыми данными.
datatype : 'json' или 'jsonp' , (или 'jsonstring' )
Определение по умолчанию jsonReader такое:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
jQuery("#gridid").jqGrid({ ... jsonReader : { root: "rows", page: "page", total: "total", records: "records", repeatitems: true, cell: "cell", id: "id", userdata: "userdata", subgrid: {root:"rows", repeatitems: true, cell:"cell" } }, ... }); |
Если datatype равен 'json' , jqGrid ожидает следующий формат по умолчанию для JSON-данных:
1 2 3 4 5 6 7 8 9 10 |
{ "total": "xxx", "page": "yyy", "records": "zzz", "rows" : [ {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, {"id" :"2", "cell":["cell21", "cell22", "cell23"]}, ... ] } |
Теги, используемые в этом примере, описаны в таблице ниже:
Тег | Описание |
---|---|
total | Общее количество страниц |
page | Текущая страница |
records | Общее количество записей |
rows | Массив с данными |
id | Уникальный id записи/строки |
cell | Массив с данными для записи/строки |
Структура jsonReader очень похожа на структуру xmlReader. Единственная отсутствующая часть — элемент row, который не нужен для JSON-данных. Давайте начнём нашу прогулку по jsonReader-у.
- root
Этот элемент описывает, где начинаются наши данные. Другими словами, этот элемент указывает на массив с данными. Если мы укажем так:
1 2 3 4 5 |
jQuery("#gridid").jqGrid({ ... jsonReader : {root:"invdata"}, ... }); |
тогда возвращённая строка должна быть:
1 2 3 4 5 6 7 8 9 10 |
{ "total": "xxx", "page": "yyy", "records": "zzz", "invdata" : [ {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, {"id" :"2", "cell":["cell21", "cell22", "cell23"]}, ... ] } |
Элементы
описывают информацию, необходимую для постраничной навигации. Например, если jsonReader установлен так:
1 2 3 4 5 6 7 8 9 10 |
jQuery("#gridid").jqGrid({ ... jsonReader : { root:"invdata", page: "currpage", total: "totalpages", records: "totalrecords" }, ... }); |
тогда данные должны быть:
1 2 3 4 5 6 7 8 9 10 |
{ "totalpages": "xxx", "currpage": "yyy", "totalrecords": "zzz", "invdata" : [ {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, {"id" :"2", "cell" :["cell21", "cell22", "cell23"]}, ... ] } |
Элемент
описывает массив, содержащий данные для строки.
1 2 3 4 5 6 7 8 9 10 11 |
jQuery("#gridid").jqGrid({ ... jsonReader : { root:"invdata", page: "currpage", total: "totalpages", records: "totalrecords", cell: "invrow" }, ... }); |
данные, подходящие для этого описания, должны быть:
1 2 3 4 5 6 7 8 9 10 |
{ "totalpages": "xxx", "currpage": "yyy", "totalrecords": "zzz", "invdata" : [ {"id" :"1", "invrow" :["cell11", "cell12", "cell13"]}, {"id" :"2", "invrow" :["cell21", "cell22", "cell23"]}, ... ] } |
Элемент
описывает уникальный идентификатор для строки.
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery("#gridid").jqGrid({ ... jsonReader : { root:"invdata", page: "currpage", total: "totalpages", records: "totalrecords", cell: "invrow", id: "invid" }, ... }); |
Данные для этого описания:
1 2 3 4 5 6 7 8 9 10 |
{ "totalpages": "xxx", "currpage": "yyy", "totalrecords": "zzz", "invdata" : [ {"invid" :"1", "invrow" :["cell11", "cell12", "cell13"]}, {"invid" :"2", "invrow" :["cell21", "cell22", "cell23"]}, ... ] } |
Можно указывать пустую строку в качестве элемента cell. Также можно указывать значение элемента id числом. Пример:
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery("#gridid").jqGrid({ ... jsonReader : { root:"invdata", page: "currpage", total: "totalpages", records: "totalrecords", cell: "", id: "0" }, ... }); |
В этом случае идентификатором будет первый элемент в строке данных.
1 2 3 4 5 6 7 8 9 10 |
{ "totalpages" : "xxx", "currpage" : "yyy", "totalrecords" : "zzz", "invdata" : [ ["1", "cell11", "cell12", "cell13"], ["2", "cell21", "cell22", "cell23"], ... ] } |
- repeatitems
указывает jqGrid на то, что информация для данных в строке повторяемая. То есть элементы имеют тот же тег, что описан в свойстве cell. Установка этого свойства в false указывает, что jqGrid должен искать элементы в JSON по имени. Это name из colModel или имя, описанное в свойстве jsonmap в colModel.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery("#gridid").jqGrid({ ... jsonReader : { root:"invdata", page: "currpage", total: "totalpages", records: "totalrecords", repeatitems: false, id: "0" }, ... }); |
Данные для нашего примера:
1 2 3 4 5 6 7 8 9 10 |
{ "totalpages" : "xxx", "currpage" : "yyy", "totalrecords" : "zzz", "invdata" : [ {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"}, ... ] } |
Элемент id в этом случае 'invid' .
Очень полезная особенность здесь (repeatitems:false) это то, что нет больше необходимость включать все данные, описанные в colModel. Так как мы делаем поиск по имени, порядок элементов не обязан совпадать с порядком в colModel. Следовательно, эта строка правильно интерпретируется в jqGrid:
1 2 3 4 5 6 7 8 9 10 |
{ "totalpages" : "xxx", "currpage" : "yyy", "totalrecords" : "zzz", "invdata" : [ {"invid" :"1", "invdate" : "cell11", "note" :"somenote"}, {"invid" :"2", "amount" : "cell22", "tax" :"cell23", "total" :"2345"}, ... ] } |
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Строка с JSON в jqGrid».
Предыдущая статья — «JqGrid. Заметки и ограничения использования XML-данных».
Фёдор, спасибо большое за Ваш труд! Пишите Вы во всех смыслах грамотно. Успехов!