Как JavaScript Grid работает с протоколом OData
В прошлой статье мы упоминали, что: В настоящее время существует большое количество библиотек, поддерживающих протокол 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.Основные запросы грида к серверу: Получить общее количество записей, удовлетворяющих некоторому условию. Получить выборку из общего набора записей для показа на одной странице. Получить весь набор записей. Отсортировать записи по одному или нескольким полям. Отфильтровать записи по некоторому набору условий. Добавить новую запись. Модифицировать запись. Удалить запись. 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
