- PVSM.RU - https://www.pvsm.ru -
В одной из прошлых статей мы кратко рассказали, как грид контролы работают с удаленным сервером, используя OData протокол. Большинство современных грид контролов позволяют удобно группировать данные по нескольким колонками. Рассмотрим подробнее, как формулируются запросы к REST серверу, в случае, когда грид производит автоматическую группировку данных.
Грид контролы, позволяющие группировать записи по нескольким колонкам, существенно упрощают жизнь как программисту, так и конечному пользователю. Очень удобно иметь возможность сгруппировать, например, список задач, выделить задачи, требующие помощи, разделить их по приоритетам, и т.д.
Потом можно сгруппировать их по сотрудникам и просмотреть все задачи для выбранного сотрудника, также сгруппированные по статусу и приоритету.

Особенно приятно для разработчиков то, что для создания такого комфортного интерфейса достаточно лишь нескольких строк кода.
Мы подготовили пример списка задач
nitrosdata.com/samples_devexpress_grouping.html [1]
Для этого примера мы использовали dxDataGrid компании Devexpress [2] (этот грид входит в набор компонентов DevExtreme Web)
Подробнее можно посмотреть в документации dxDataGrid:
js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/ [3]
посмотреть примеры:
js.devexpress.com/Demos/WidgetsGallery/#demo/datagridgridpagingandscrollingpager/generic/light/default [4]
простой пример работы грида без группировки с сервером NitrosBase.js [5]:
nitrosdata.com/samples_devexpress_grid.html [6]
Для того чтобы грид работал с NitrosBase.js [5] достаточно указать URL со списком данных для показа в гриде, например, список людей:
nitrosdata.com/service/testdb/person [7]
Для того чтобы включить в гриде группировку, достаточно указать свойство
groupPanel: {visible: true}
После этого грид позволяет группировать данные перетаскивая заголовки колонок на панель группировки.
Чтобы при первом показе грид сгруппировал данные по каким-либо колонкам, необходимо в описании колонок указать:
groupIndex: 0 (для первой колонки, по содержимому которой группируются данные)
groupIndex: 1 (для второй колонки, и т.д.)
Всего пара настроек, и пользователи будут Вам благодарны :)
Мы указали гриду URL по которому он может получить список задач
nitrosdata.com/service/testdb/task [8]
Далее грид автоматически формирует запрос к серверу добавляя к URL различные условия запроса.
Первый запрос, который грид шлет на сервер, для показа списка задач, сгруппированных по статусу и приоритету:
http://nitrosdata.com/service/testdb/task?$orderby=Task_Status,Task_Priority,id&$top=21&$inlinecount=allpages [9]
Поскольку данные отсортированы, то в качестве группы он берет значения полей «Task_Status» и «Task_Priority» для первой записи. Далее идут несколько записей с повторяющимися значениями этих полей. Далее идет несколько записей у которых сменился приоритет. То есть в данном случае достаточно простого запроса для получения отсортированных данных.
Если мы будем скролировать грид вниз, чтобы посмотреть остальные записи, грид попросит у сервера следующие записи, например:
В данном случае добавился еще один параметр запроса:
Перечисленные выше запросы ничем не отличаются от простых запросов, которые грид слал бы серверу для показа списка задач, отсортированных по статусу и приоритету.
Теперь попробуем схлопнуть группу записей со статусом «Completed». Грид шлёт на сервер 2 запроса:
Первый запрос
Этот запрос нужен для того, чтобы узнать количество записей со статусом «Completed» (те что мы схлопываем)
Второй запрос
Если мы схлопываем следующую группу, то первый из этих двух запросов также просит количество записей для схлопываемой группы, а вот следующий запрос теперь уже включает исключения из записей в двух схлопнутых группах:
Таким образом, грид вполне успешно обходится простыми запросами, с ипользованием сортировки, простой фильтрации и условий постраничного вывода.
В случае большого количества групп запросы с фильтрацией всех схлопнутых групп, с большим количеством условий на неравенство ($filter=… and … and … and … and … ) становятся слишком большими и недостаточно эффективными.
Можно было бы просто получить список групп, а далее просить записи по равенству полей (все записи, принадлежащие определенной группе), с запросом на сортировку по этим полям. Такой запрос при наличии необходимых индексов быстро получает небольшое количество записей внутри одной группы и потом сортирует это небольшое количество.
Но для работы таким способом необходимо было бы иметь возможность стандартизованного выполнения запросов на агрегирование данных.
Возможность выполнения запросов на агрегирование данных появилась в стандарте OData версии 4.0, и производители грид контролов собираются реализовать поддержку этих возможностей в новых версиях продуктов.
Автор: NitrosData
Источник [13]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/87392
Ссылки в тексте:
[1] nitrosdata.com/samples_devexpress_grouping.html: http://nitrosdata.com/samples_devexpress_grouping.html
[2] Devexpress: https://www.devexpress.com/
[3] js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/: http://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/
[4] js.devexpress.com/Demos/WidgetsGallery/#demo/datagridgridpagingandscrollingpager/generic/light/default: http://js.devexpress.com/Demos/WidgetsGallery/#demo/datagridgridpagingandscrollingpager/generic/light/default
[5] NitrosBase.js: http://nitrosdata.com/
[6] nitrosdata.com/samples_devexpress_grid.html: http://nitrosdata.com/samples_devexpress_grid.html
[7] nitrosdata.com/service/testdb/person: http://nitrosdata.com/service/testdb/person
[8] nitrosdata.com/service/testdb/task: http://nitrosdata.com/service/testdb/task
[9] http://nitrosdata.com/service/testdb/task?$orderby=Task_Status,Task_Priority,id&$top=21&$inlinecount=allpages: http://nitrosdata.com/service/testdb/task?%24orderby=Task_Status%2CTask_Priority%2Cid&%24top=21&%24inlinecount=allpages
[10] http://nitrosdata.com/service/testdb/task?$orderby=Task_Status,Task_Priority,id&$skip=29&$top=32&$inlinecount=allpages: http://nitrosdata.com/service/testdb/task?%24orderby=Task_Status%2CTask_Priority%2Cid&%24skip=29&%24top=32&%24inlinecount=allpages
[11] http://nitrosdata.com/service/testdb/task?$top=1&$filter=(Task_Status eq 'Completed')&$inlinecount=allpages: http://nitrosdata.com/service/testdb/task?%24top=1&%24filter=(Task_Status+eq+%27Completed%27)&%24inlinecount=allpages
[12] http://nitrosdata.com/service/testdb/task?$orderby=Task_Status,Task_Priority,id&$top=31&$filter=((Task_Status ne 'Completed'))&$inlinecount=allpages: http://nitrosdata.com/service/testdb/task?%24orderby=Task_Status%2CTask_Priority%2Cid&%24top=31&%24filter=((Task_Status+ne+%27Completed%27))&%24inlinecount=allpages
[13] Источник: http://habrahabr.ru/post/254413/
Нажмите здесь для печати.