Smart
The best project ever.
dojo-rql Module
Модуль для отображения данных с иcпользованием умных(разширеных) фильтров
Chart
- модуль для поддержки фильтров в графикахComposite
- модуль для компоновки виджетовDataPreviewControlPanel
- модуль для обьеденения панели управления фильтрами и виджетом с поддержкой фильтров для вывода данныхFilterControlPanel
- модуль панели управления фильтрамиFilteredGrid
- модуль для поддержки фильтров в таблицахFilterEditor
- модуль для редактирования фильтровTableWithConfiguration
- модуль для поддержки сохранения и загрузки настроек в таблицахTree
- модуль для поддержки деревьями dstoreUtil
- модуль с вспомагательными утилитамиextensions/GridRqlFilter
- модуль с вспомагательными утилитамиextensions/StoreRqlFilter
- модуль с вспомагательными утилитами
Что бы начать
Установите библиотеку командой: npm install dojo-rql
Что бы быстро приступить к использованию библиотеки следуйте следуще иструкции
Создаем Rest DataStore (вы должны иметь backend )
var centralDataStore = new 'headers': 'Accept': 'application/json' 'useRangeHeaders': true "target": "/rest/users" ;
Далее создаем таблицу с поддержкой фильтров
var filteredGridOption = { "title": "Таблица пользователей", // указываем title элемента "name": "usersProfile", // указываем name элемента "options": { // Указываем опции для фильтров "columns": [ {"label": "id", "field": "id"}, {"label": "Имя", "field": "name"}, {"label": "Фамилия", "field": "surname"} ], "collection": centralDataStore, "selectionMode": "single", "pagingLinks": false, "pagingTextBox": true, "firstLastArrows": true, "rowsPerPage": 15, "pageSizeOptions": [10, 15, 25] }, "declare": [ "Grid", "Keyboard", "Selection", "ColumnHider", "ColumnResizer", "GridRqlFilter" ] }; var filterGrid = new FilteredGrid(filteredGridOption);
Таблица уже поддежривает фильтры, но что бы мы могли ими управлять нам нужно добавить панель управлени фильтрами
var tableFilterControlPanel = "title": "Панель управления фильтрами " "id": "tableFilter" "name": "plotPublishPrice" "filteredStoreDataOption": "label": "Имя" "value": "type": "string" "name": "name" "field": 'type': "TextBox" "filter": "id": 0 "label": "=" "value": "eq" "id": 0 "label": "!=" "value": "ne" "label": "Фамилия" "value": "type": "string" "name": "surname" "field": 'type': "TextBox" "filter": "id": 0 "label": "=" "value": "eq" "id": 0 "label": "!=" "value": "ne" "store": new 'headers': 'Accept': 'application/json' "target": "/rest/filters_list" ; var tableDataPreviewControlPanel = title: "Таблица профилей пользователей" filterControlPanel: tableFilterControlPanel dataViewer: filterGrid ;
Докуменация
(Coming soon)
Примеры
Использование модуля Chart
Точно так же как мы создавали таблицу, мы можем создать график. Создадим Rest DataStore (Вы должны иметь backend )
var centralDataStore = new 'headers': 'Accept': 'application/json' 'useRangeHeaders': true "target": "/rest/sin" ;
Теперь создадим Char. В данном случаче мы будем сторить синусоиду, по этому Chart type будет Lines
var filterChartOption = "title": "Гистограмма цены выставленных товаров" // Указываем title элемента "name": "plotPublishPrice" // Указываем name элемента "store": centralDataStore // Указываем хранилище "type": Lines // Указываем тип чарта "xAxisLabel": 'Ось абсцисс' // Указываем лейбл для "yAxisLabel": 'Ось ординат' // Указываем тип чарта ; var filterChart = filterChartOption;
Теперь можно так же добавить поддержку панели управления фльтрами. Сконфигурируем и создадим саму панель фильтров для нашего графика
var chartFilterControlPanel = "title": "Панель управления фильтрами " // Указываем title который будет ввиден как заголовок элемента "id": "chartFilter" // указываем id элемента "name": "plotPublishPrice" // указываем name элемента "columns": // Передаем перечень колнок для таблици фильтров(колонки совместимы с колонками dgrid) "label": "id" "field": "id" "label": "Название" "field": "name" "editor": "text" "editOn": "dblclick" "autoSave": true "filteredStoreDataOption": // Указываем опции для фильтров "label": "Ось абсцисс" // Указываем label для фильтрованого параметра "value": // Указываем параметры значения "type": "string" // Указываем тип значения "name": "x" // Указываем фактическое имя "field": 'type': "TextBox" // Указываем editor для поля "filter": // Указываем списко доступных фильтров для поля "id": 0 "label": "=" "value": "eq" "id": 0 "label": ">" "value": "gt" "id": 0 "label": "<" "value": "lt" "id": 0 "label": ">=" "value": "gte" "id": 0 "label": "<=" "value": "lte" "id": 0 "label": "!=" "value": "ne" "label": "Ось ординат" "value": "type": "string" "name": "y" "field": 'type': "TextBox" "filter": "id": 0 "label": "=" "value": "eq" "id": 0 "label": ">" "value": "gt" "id": 0 "label": "<" "value": "lt" "id": 0 "label": ">=" "value": "gte" "id": 0 "label": "<=" "value": "lte" "id": 0 "label": "!=" "value": "ne" "store": new // Указываем сторе дл яхранения фильтров 'headers': 'Accept': 'application/json' "target": "/rest/filters_list" ;
Соеденим панель фильтров и chart DataPreviewControlPanel - обертка над таблицей которая дает возможность подключать панель фильтров к таблице.
var chartDataPreviewControlPanel = title: "Функция f(x) = sin(x) (Синусоида)" filterControlPanel: chartFilterControlPanel dataViewer: filterChart ;
Использование модуля Composite
Теперь давайте обьеденим наш виджет Chart и виодет FilteredGrid. Сам по себе, обьект Composite может содержать любое количество дочерних элементов групируя их в одном виджете для удобного управления и взаимодейсвия этими элементами.
var composite = components: tableDataPreviewControlPanel chartDataPreviewControlPanel ; composite;
Поддерживаемый RQL
- query
- LogicOperator
- and() - содержит множество нод условий которые должны быть обьеденены по И
- or() - содержит множество нод условий которые должны быть обьеденены по ИИЛ
- not() - содержит множество нод условий которые должны быть инвертированы в НЕ
- ArrayOperator
- in() - нода для проверки вхождения значения в указаное перечсление
- out() - нода для проверки не наличия значений в указаном перечсление
- ScalarOperator
- eq() - нода равенста
- ne() - нода не равенста
- ge() - нода больше или равно
- gt() - нода больше
- le() - нода меньше или равно
- lt() - нода меньше
- like() - нода проверки значения по маске
- LogicOperator
- select
- Aggregate func
- count() - агрегатная функция для подсчета количесва значений
- max() - агрегатная функция для подсчета максимального значения
- min() - агрегатная функция для подсчета минимального значения
- groupby() - агрегатная функция для групирования значений
- Aggregate func
- sort() - нода для указания сортировки
- limit(limit, offset) - нода для указания лимита и оффсета выборки
Пример фильтра в rql();
and(and(eq(q,null()),ne(q,null()),le(q,r),ge(q,u)),or(lt(q,t),gt(q,y),in(q,(a,s,d,f,g)))) &limit(20,30)&sort(-q) &select(q,max(q),min(q),count(q))
Отправка rql запросов
При отправке запроса нужно использовать зголовок
'Accept': 'application/json'
для получения данных в JSON формате.
Так же вы можете комбинировать limit() для запрпоса указывая фактичиский лимит на поулчения данный в самом rql,
а ограничивать выборку нужно в заголовке.
При таком подходе данные будут сначала отлимитированы по limit указаному в rql,
а после на них будет наложен фильтр который указан в заголовках.
Отправленый rql limit(37)
Отправленые заголовки
'Range': 'items=0-14'
'X-Range': 'items=0-14'
В ответе будет содержатся заголовки
'Content-Range': 'items 0-13/37'
Как видно, заголовок ответа содержит наш лимит отпрвленый в rql Работает как основной фильтр выборки 'items 0-13/37' -> limit(37) А лимиты отправлены в заголовках, действуют как фильтр поверх тех данных что мы получили на предыдущем шаге 'items 0-13/37' -> 'Range': 'items=0-14'
Подобные query запросы нужно отправлять методом GET.
Если мы хотим добавить даные в сторе, мы можем отправить POST запрос для того что бы добавить новый обект или отправить PUT запрос что бы удалить его. Так же мы можем отправить DELETE запрос что бы удалить нужный элемент.
POST
В теле запроса мы должны указать либо один обькет лбо массив обьектов которые мы хотим добавить.
PUT
В теле запроса мы должны указать либо один обькет который хотим изменить. Обязательно указать id. Указать нужено либо в теле обьекта либо как часть REST запроса.
DELETE
License
Copyright (c) 2016 avz-cmf Licensed under the GNU license.