Цикл статей «Документация jqGrid на русском».
Следующая статья — «Строка с XML в jqGrid».
Предыдущая статья — «Манипуляция данными в jqGrid».
Как упоминалось выше, если мы не указываем datatype и xmlReader в свойствах, то таблица ожидает XML-данные, и структура этих данных описана в статье «Манипуляция данными в jqGrid». Но что, если мы не можем менять ответ сервера? Решение этой проблемы — это xmlReader с некоторыми дополнениями в colModel. Здесь короткое описание xmlReader.
Важное замечание: Правила доступа к элементу из XML те же, что и в библиотеке jQuery, или в CSS-шаблонах. Для получения большей информации обратитесь к http://www.w3.org/TR/REC-CSS2/selector.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
jQuery("#gridid").jqGrid({ ... xmlReader : { root: "rows", row: "row", page: "rows>page", total: "rows>total", records : "rows>records", repeatitems: true, cell: "cell", id: "[id]", userdata: "userdata", subgrid: { root:"rows", row: "row", repeatitems: true, cell:"cell" } }, ... }); |
Начиная с версии 4.3 jqGrid может читать любые атрибуты из XML-ответа. Более того, теги могут быть функциями.
Все свойства в xmlReader будут объяснены в примерах. Это будет более понятно, чем сухое описание.
-
root (Корневой элемент)
Первое свойство здесь описывает корневой элемент. Это описывает место, где наши данные начинаются и все остальные циклы начинаются с этого элемента. Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
... <invoices> <request>true</request> ... <result> <row> <cell>data1</cell> <cell>data2</cell> <cell>data3</cell> <cell>data4</cell> <cell>data5</cell> <cell>data6</cell> </row> ... </result> </invoices> |
Если мы установим корневой элемент в "result" , то вся обработка данных будет начинаться от него. В этом случае, так как все наши строки в тегах <row> и наши ячейки в тегах <cell>, нам нужно указать только:
|
1 2 3 4 5 |
jQuery("#gridid").jqGrid({ ... xmlReader: { root:"result" }, ... }); |
-
row
Он описывает конкретную строку. Элемент row должен быть дочерним к элементу root (корневому). Например, если XML выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
... <invoices> <request>true</request> ... <result> <invoice> <cell>data1</cell> <cell>data2</cell> <cell>data3</cell> <cell>data4</cell> <cell>data5</cell> <cell>data6</cell> </invoice> ... </result> </invoices> |
то свойство нужно установить в:
|
1 2 3 4 5 |
jQuery("#gridid").jqGrid({ ... xmlReader: { root:"result", row:"invoice" }, ... }); |
-
page
-
total и
-
records
элементы описывают информацию для постраничной навигации. Эти элементы могут быть, но не обязательно, дочерними элементами к корневому элементу (root). Например, чтобы разобрать данные:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
... <invoices> <request>true</request> ... <currentpage>1</currentpage> <totalpages>10</totalpages> <totalrecords>20</totalrecords> <result> <invoice> <cell>data1</cell> <cell>data2</cell> <cell>data3</cell> <cell>data4</cell> <cell>data5</cell> <cell>data6</cell> </invoice> ... </result> </invoices> |
то xmlReader должен выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery("#gridid").jqGrid({ ... xmlReader: { root:"result", row:"invoice", page:"invoices>currentpage", total:"invoices>totalpages", records:"invoices>totalrecords" }, ... }); |
Элементы repeatitems и cell говорят jqGrid, что информация описана в повторяемых тегах, то есть элементы имеют тот же тег, что описан в элементе cell. Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
... <invoices> <request>true</request> ... <currentpage>1</currentpage> <totalpages>10</totalpages> <totalrecords>20</totalrecords> <result> <invoice> <invcell>data1</invcell> <invcell>data2</invcell> <invcell>data3</invcell> <invcell>data4</invcell> <invcell>data5</invcell> <invcell>data6</invcell> </invoice> ... </result> </invoices> |
xmlReader будет выглядет так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery("#gridid").jqGrid({ ... xmlReader: { root:"result", row:"invoice", page:"invoices>currentpage", total:"invoices>totalpages", records:"invoices>totalrecords", repeatitems:true, cell:"invcell" }, ... }); |
-
id
Если repeatitems установлено в true, и свойство key в colModel установлено в false, то id, если присутствует в XML-данных, должен быть атрибутом элемента row. Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
... <invoices> <request>true</request> ... <currentpage>1</currentpage> <totalpages>10</totalpages> <totalrecords>20</totalrecords> <result> <invoice asin='12345'> <invcell>data1</invcell> <invcell>data2</invcell> <invcell>data3</invcell> <invcell>data4</invcell> <invcell>data5</invcell> <invcell>data6</invcell> </invoice> ... </result> </invoices> |
в этом случае xmlReader будет таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
jQuery("#gridid").jqGrid({ ... xmlReader: { root:"result", row:"invoice", page:"invoices>currentpage", total:"invoices>totalpages", records:"invoices>totalrecords", repeatitems:true, cell:"invcell", id : "[asin]" }, ... }); |
Предположим, что структура, возвращённая сервером, имеет следующий формат:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
... <invoices> <request>true</request> ... <currentpage>1</currentpage> <totalpages>10</totalpages> <totalrecords>20</totalrecords> <result> <invoice> <asin>12345</asin> <invoiceno>data1</invoiceno> <invoicedate>data2</invoicedate> <invoiceamount>data3</invoiceamount> <invoicetax>data4</invoicetax> <invoicetotal>data5</invoicetotal> <notes>data6</notes> </invoice> ... </result> </invoices> |
где тег <asin> содержит уникальный id, и он должен быть установлен в качестве идентификатора строка в таблице и не должен показываться пользователю. Следуя правилам, мы можем описать следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery("#gridid").jqGrid({ ... xmlReader: { root:"result", row:"invoice", page:"invoices>currentpage", total:"invoices>totalpages", records:"invoices>totalrecords", repeatitems:false, id : "asin" }, ... }); |
и наш colModel из примера будет выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<code javascript> jQuery("#gridid").jqGrid({ ... colModel :[ {name:'invid', index:'invid', width:55, xmlmap:"invoiceno"}, {name:'invdate', index:'invdate', width:90, xmlmap:"invoicedate"}, {name:'amount', index:'amount', width:80, align:'right', xmlmap:"invoiceamount"}, {name:'tax', index:'tax', width:80, align:'right', xmlmap:"invoicetax"}, {name:'total', index:'total', width:80, align:'right', xmlmap:"invoicetotal"}, {name:'note', index:'note', width:150, sortable:false, xmlmap:"notes"} ], xmlReader: { root:"result", row:"invoice", page:"invoices>currentpage", total:"invoices>totalpages", records:"invoices>totalrecords", repeatitems:false, id : "asin" }, ... }); |
Мы можем использовать другой трюк. Если имена в colModel важны для нас, то мы можем сделать следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
jQuery("#gridid").jqGrid({ ... colModel :[ {name:'invoiceno', index:'invid', width:55}, {name:'invoicedate', index:'invdate', width:90}, {name:'invoiceamount', index:'amount', width:80, align:'right'}, {name:'invoicetax', index:'tax', width:80, align:'right'}, {name:'invoicetotal', index:'total', width:80, align:'right'}, {name:'notes', index:'note', width:150, sortable:false} ], xmlReader: { root:"result", row:"invoice", page:"invoices>currentpage", total:"invoices>totalpages", records:"invoices>totalrecords", repeatitems:false, id : "asin" }, ... }); |
Другими словами, jqGrid сначала смотрит свойство xmlmap, если его нет, то свойство name используется вместо xmlmap. Но всё это верно только когда repeatitems в xmlReader установлено в false.
Свойство subgrid включено в несколько примеров xmlReader выше. Правила для него те же, что описаны выше. Больше информации про подтаблицы можно найти в разделе «Подтаблицы (Subgrid) в jqGrid».
Новые английские слова:
moreover [mɔːˈrəʊvə] — кроме того, более того
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Строка с XML в jqGrid».
Предыдущая статья — «Манипуляция данными в jqGrid».