В прошлой статье мы упоминали, что:
В настоящее время существует большое количество библиотек, поддерживающих протокол OData, и каждый день появляются новые. В частности, с OData работают такие JavaScript библиотеки, как Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo, JayData, Breeze.js, datajs, ODataJS, angular-odata, и т.д.
Многие из этих библиотек существенно упрощают разработку сложных приложений благодаря стандарту OData. Например, достаточно грид контролу указать URL к серверу OData и все остальное он сделает сам: пэйджинг, сортировку, добавление- модификацию-удаление записей, фильтрацию данных, группировку и т.д.
Мы подготовили примеры того, как гриды работают с OData.
http://nitrosdata.com/samples_kendo_ui_grid1.html — Kendo UI Grid. http://nitrosdata.com/samples_kendo_ui_grid2.html — Kendo UI Grid с виртуальным скроллингом вместо пэйджинга. http://nitrosdata.com/samples_devexpress_grid.html — DevExtreme Data Grid. http://nitrosdata.com/samples_syncfusion_grid.html — Syncfusion Grid.
Основные запросы грида к серверу:
Получить общее количество записей, удовлетворяющих некоторому условию. Получить выборку из общего набора записей для показа на одной странице. Получить весь набор записей. Отсортировать записи по одному или нескольким полям. Отфильтровать записи по некоторому набору условий. Добавить новую запись. Модифицировать запись. Удалить запись. Batch update – добавление, изменение и удаление группы записей.
Рассмотрим детальнее основные запросы на примере
Kendo UI Grid в качестве грид контрола (остальные гриды работают примерно так же) NitrosBase.js в качестве OData сервера
Настройка грида
Связь грида и данных осуществляется через Kendo DataSource компонент. В примере на странице nitrosdata.com/samples_kendo_ui_grid1.html в настройках грида указан тип протокола OData и URL к набору данных для чтения списка людей.
dataSource: { type: "odata", transport: { read: "http://nitrosdata.com/service/testdb/person" }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true },
Более подробно о настройке DataSource компонента можно посмотреть в документации: docs.telerik.com/kendo-ui/api/javascript/data/datasource
Запрос на получение данных
Для отображения списка людей грид добавляет различные условия запроса к URL, указанному в настройках. Для получения первой страницы грид выполняет следующий запрос:
http://nitrosdata.com/service/testdb/person?$callback=jQuery19102346130800433457_1424080067186&$inlinecount=allpages&$format=json&$top=20
Основные параметры запроса:
$callback=jQuery19102346130800433457_1424080067186 – указывает серверу что данные должны быть в формате JSONP. Значение параметра задает имя функции, в которую должен быть обернут результат запроса $inlinecount=allpages – указывает серверу что результат должен включать общее количество записей (для определения количества страниц) $format=json – результат требуется в формате JSON (см. также параметр $callback) $top=20 – требуется вернуть не более 20 записей для первой страницы.
Для получения второй страницы добавляется параметр $skip:
http://nitrosdata.com/service/testdb/person?$callback=jQuery19105304541746154428_1425304359212&$inlinecount=allpages&$format=json&$top=20&$skip=20
$skip=20 – требуется вернуть результат, пропустив первые 20 записей.
Настройка грида для модификации данных
Необходимо внести несколько дополнений, чтобы грид позволил модифицировать данные.
Модифицируем datasource:
Добавим описание операций в переменную transport
transport: { read: "http://nitrosdata.com/service/testdb/person", create: {url: "http://nitrosdata.com/service/testdb/person"}, update: {url: "http://nitrosdata.com/service/testdb/person"}, destroy: {url: function (data) { return "http://nitrosdata.com/service/testdb/person" + "(" + data.id + ")"; } } },
Добавим в описание схемы данных определение id – это необходимо чтобы грид правильно выполнял операции добавления, модификации и удаления записей
schema: {model: {id: "id"}}
Добавим свойства в опции грида:
editable: true, toolbar: ["create", "save", "cancel"],
Возможно настроить грид и по-другому, вплоть до указания функций, выполняющихся при операциях модификации данных. Более подробно см. docs.telerik.com/kendo-ui/api/javascript/data/datasource
Добавление записи
При добавлении новой записи грид шлет на сервер запрос “PUT”, используя URL, указанный для операции “create”.
Тело запроса будет содержать запись в JSON формате, например:
{id: "", firstname: "John", lastname: "Walker"}
В качестве ответа грид ожидает содержимое той-же записи с возможными исправлениями, внесенными сервером.
Модификация записи
При модификации записи грид шлет на сервер запрос “PUT” используя URL указанный для операции “update”
Все остальное работает также, как и при добавлении новой записи.
Удаление записи
При удалении записи грид шлет на сервер запрос “DELETE”, используя URL, указанный для операции “destroy”. URL в данном случае указывает на нужную запись, которую мы хотим удалить.
Резюме
Благодаря тому, что протокол OData является стандартом, различные контролы различных производителей могут автоматически формировать запросы, удовлетворяющие стандарту. В настройках Kendo UI Grid достаточно указать нужный URL, а все необходимые запросы грид сформирует автоматически.
OData сервер NitrosBase.js позволяет ускорить создание прототипов приложений. Вы можете положить на форму различные контролы, указать URL, и получить работающее приложение.
P.S. Не все контролы поддерживают Odata, но их взаимодействие с сервером очень похоже, отличаясь только синтаксисом запросов. NitrosBase.js легко настраивается для использования других API. Вот пример взаимодействия известного контрола jqGrid с NitrosBase.js: nitrosdata.com/samples_jqgrid.html http://habrahabr.ru/post/251965/
Добавить комментарий