Как JavaScript Grid работает с протоколом OData

В прошлой статье мы упоминали, что:

В настоящее время существует большое количество библиотек, поддерживающих протокол OData, и каждый день появляются новые. В частности, с OData работают такие JavaScript библиотеки, как Kendo UI ^[1], DevExtreme Web ^[2], Syncfusion HTML5 controls ^[3], Infragistics HTML5 controls ^[4], OpenUI5 ^[5], Wijmo ^[6], JayData ^[7], Breeze.js ^[8], datajs ^[9], ODataJS ^[10], angular-odata ^[11], и т.д.

Многие из этих библиотек существенно упрощают разработку сложных приложений благодаря стандарту OData. Например, достаточно грид контролу указать URL к серверу OData и все остальное он сделает сам: пэйджинг, сортировку, добавление- модификацию-удаление записей, фильтрацию данных, группировку и т.д.

Мы подготовили примеры того, как гриды работают с OData.

• http://nitrosdata.com/samples_kendo_ui_grid1.html ^[12] — Kendo UI Grid.
• http://nitrosdata.com/samples_kendo_ui_grid2.html ^[13] — Kendo UI Grid с виртуальным скроллингом вместо пэйджинга.
• http://nitrosdata.com/samples_devexpress_grid.html ^[14] — DevExtreme Data Grid.
• http://nitrosdata.com/samples_syncfusion_grid.html ^[15] — Syncfusion Grid.

Основные запросы грида к серверу:

• Получить общее количество записей, удовлетворяющих некоторому условию.
• Получить выборку из общего набора записей для показа на одной странице.
• Получить весь набор записей.
• Отсортировать записи по одному или нескольким полям.
• Отфильтровать записи по некоторому набору условий.
• Добавить новую запись.
• Модифицировать запись.
• Удалить запись.
• Batch update – добавление, изменение и удаление группы записей.

Рассмотрим детальнее основные запросы на примере

• Kendo UI Grid ^[1] в качестве грид контрола (остальные гриды работают примерно так же)
• NitrosBase.js ^[16] в качестве OData сервера

Настройка грида

Связь грида и данных осуществляется через Kendo DataSource компонент. В примере на странице nitrosdata.com/samples_kendo_ui_grid1.html ^[12] в настройках грида указан тип протокола 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 ^[17]

Запрос на получение данных

Для отображения списка людей грид добавляет различные условия запроса к URL, указанному в настройках. Для получения первой страницы грид выполняет следующий запрос:
http://nitrosdata.com/service/testdb/person?$callback=jQuery19102346130800433457_1424080067186&$inlinecount=allpages&$format=json&$top=20 ^[18]

Основные параметры запроса:

• $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 ^[19]

• $skip=20 – требуется вернуть результат, пропустив первые 20 записей.

Настройка грида для модификации данных

Необходимо внести несколько дополнений, чтобы грид позволил модифицировать данные.

1. Модифицируем 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"}}
   

2. Добавим свойства в опции грида:

   editable: true, 
   toolbar: ["create", "save", "cancel"],
   

Возможно настроить грид и по-другому, вплоть до указания функций, выполняющихся при операциях модификации данных. Более подробно см. docs.telerik.com/kendo-ui/api/javascript/data/datasource ^[17]

Добавление записи

При добавлении новой записи грид шлет на сервер запрос “PUT”, используя URL, указанный для операции “create”.
Тело запроса будет содержать запись в JSON формате, например:

{id: "", firstname: "John", lastname: "Walker"}

В качестве ответа грид ожидает содержимое той-же записи с возможными исправлениями, внесенными сервером.

Модификация записи

При модификации записи грид шлет на сервер запрос “PUT” используя URL указанный для операции “update”
Все остальное работает также, как и при добавлении новой записи.

Удаление записи

При удалении записи грид шлет на сервер запрос “DELETE”, используя URL, указанный для операции “destroy”. URL в данном случае указывает на нужную запись, которую мы хотим удалить.

Резюме

Благодаря тому, что протокол OData является стандартом, различные контролы различных производителей могут автоматически формировать запросы, удовлетворяющие стандарту. В настройках Kendo UI Grid достаточно указать нужный URL, а все необходимые запросы грид сформирует автоматически.

OData сервер NitrosBase.js ^[16] позволяет ускорить создание прототипов приложений. Вы можете положить на форму различные контролы, указать URL, и получить работающее приложение.

P.S. Не все контролы поддерживают Odata, но их взаимодействие с сервером очень похоже, отличаясь только синтаксисом запросов. NitrosBase.js легко настраивается для использования других API. Вот пример взаимодействия известного контрола jqGrid с NitrosBase.js: nitrosdata.com/samples_jqgrid.html ^[20]

Автор: NitrosData

Источник ^[21]