Подключение нового фильтра bitrix:main.ui.filter для пользовательских форм.
Данный фильтр работает в связке с гридом bitrix:main.ui.filter. У меня стояла задача прикрепить для своих пользовательских форм, где нет необходимости в использовании грида.
Рассмотрим кратко, как можно использовать данный компонент.
Вначале создадим массив с полями. Детально о вариантах полей Вы можете узнать в исходнике компонента.
где укажем id поля, названием, и тип.
Если мы ищем текстовое значение то укажем тик string, если хотим вывести Дату/Период фильтрации.
Для даты доступно множество вариантов фильтрации:
В фильтре мы можем исключить ненужные варианты фильтрации по дате.
Далее в нужном месте мы просто вызываем компонент с нужными параметрами.
Форму подключили, однако просто данные фильтра мы не получим, помог такой вот костыль.
В шаблоне компонента редактируем файл script.js.
Нам нужны событие обновления и инициализации фильтра.
При изменении фильтра срабатывает метод applyFilter: function(clear, applyPreset)
где перед return вызываем метод this.getFilterFieldsValues() , который возвращает массив с полями фильтра.
Также вызываем этот метод для получения полей при инициализации фильтра, в методе init.
Для примера можем вывести список полей в консоль
результат вывода в моем варианте выглядит так:
Разумеется, вместо вывода в консоль, можно использовать ajax запрос для обновления пользовательских форм.
PS.
Данное применение фильтра выглядит как костыль, надеюсь услышать Ваши предложения.
Данный фильтр работает в связке с гридом bitrix:main.ui.filter. У меня стояла задача прикрепить для своих пользовательских форм, где нет необходимости в использовании грида.
Рассмотрим кратко, как можно использовать данный компонент.
Вначале создадим массив с полями. Детально о вариантах полей Вы можете узнать в исходнике компонента.
$arFilter["id"] = "DIVISION";
$arFilter["name"] = Loc::getMessage("TPO_FILTER_DIVISION");
$arFilter["default"] = true;
$arFilter["type"] = "string";
$this->arResult["FILTER"][] = $arFilter;
$arFilter["id"] = "DATE_FROM";
$arFilter["name"] = Loc::getMessage("TPO_FILTER_DATE");
$arFilter["default"] = false;
$arFilter["type"] = "date";
$arFilter["exclude"] = array();
//Исключаемые типы фильтров
$arFilter["exclude"][] = "CURRENT_QUARTER";
$arFilter["exclude"][] = "LAST_7_DAYS";
$arFilter["exclude"][] = "LAST_30_DAYS";
$arFilter["exclude"][] = "LAST_60_DAYS";
$arFilter["exclude"][] = "LAST_90_DAYS";
$arFilter["exclude"][] = "PREV_DAYS";
$arFilter["exclude"][] = "NEXT_DAYS";
$arFilter["exclude"][] = "QUARTER";
$arFilter["exclude"][] = "YEAR";
$arFilter["exclude"][] = "NEXT_WEEK";
$arFilter["exclude"][] = "NEXT_MONTH";
$this->arResult["FILTER"][] = $arFilter; |
где укажем id поля, названием, и тип.
Если мы ищем текстовое значение то укажем тик string, если хотим вывести Дату/Период фильтрации.
Для даты доступно множество вариантов фильтрации:
"Любая дата" :"NONE", "Вчера":"YESTERDAY" "Сегодня" :"CURRENT_DAY", "Завтра":"TOMORROW", "Текущая неделя" :"CURRENT_WEEK", "Текущий месяц":"CURRENT_MONTH", "Текущий квартал" :"CURRENT_QUARTER", "Месяц" :"MONTH", "Точная дата":"EXACT", "Прошлая неделя":"LAST_WEEK", "Прошлый месяц":"LAST_MONTH", "Диапазон":"RANGE", "Последние 7 дней" :"LAST_7_DAYS", "Последние 30 дней" :"LAST_30_DAYS", "Последние 60 дней" :"LAST_60_DAYS", "Последние 90 дней" :"LAST_90_DAYS", "Последние N дней" :"PREV_DAYS", "Следующие N дней" :"NEXT_DAYS", "Квартал" :"QUARTER", "Год" :"YEAR", "Следующая неделя" :"NEXT_WEEK", "Следующий месяц" :"NEXT_MONTH" |
В фильтре мы можем исключить ненужные варианты фильтрации по дате.
$arFilter["exclude"][] = "CURRENT_QUARTER"; $arFilter["exclude"][] = "LAST_7_DAYS"; $arFilter["exclude"][] = "LAST_30_DAYS"; |
Далее в нужном месте мы просто вызываем компонент с нужными параметрами.
<? $APPLICATION->IncludeComponent( 'bitrix:main.ui.filter', '', array( 'GRID_ID' => "tpo-event-grid", 'FILTER_ID' => "tpo-event-filter", 'FILTER' => $arResult['FILTER'], 'VALUE_REQUIRED_MODE' => true, 'ENABLE_LIVE_SEARCH' => true, 'ENABLE_LABEL' => true ), $component ); ?> |
Форму подключили, однако просто данные фильтра мы не получим, помог такой вот костыль.
В шаблоне компонента редактируем файл script.js.
Нам нужны событие обновления и инициализации фильтра.
При изменении фильтра срабатывает метод applyFilter: function(clear, applyPreset)
где перед return вызываем метод this.getFilterFieldsValues() , который возвращает массив с полями фильтра.
Также вызываем этот метод для получения полей при инициализации фильтра, в методе init.
Для примера можем вывести список полей в консоль
init: function()
{
BX.bind(document, 'mousedown', BX.delegate(this._onDocumentClick, this));
BX.bind(document, 'keydown', BX.delegate(this._onDocumentKeydown, this));
BX.bind(window, 'load', BX.delegate(this.onWindowLoad, this));
BX.addCustomEvent('Grid::ready', BX.delegate(this._onGridReady, this));
this.getSearch().updatePreset(this.getParam('CURRENT_PRESET'));
this.clearGet();
console.log(this.getFilterFieldsValues());
},
applyFilter: function(clear, applyPreset)
{
var presetId = this.getPresetId(clear, applyPreset);
var filterId = this.getParam('FILTER_ID');
var promise = new BX.Promise(null, this);
var Preset = this.getPreset();
var Search = this.getSearch();
var applyParams = {autoResolve: !this.grid};
var self = this;
this.showGridAnimation();
BX.onCustomEvent(window, 'BX.Main.Filter:beforeApply', [filterId, {}, this, promise]);
this.updatePreset(presetId, null, clear, null).then(function() {
Search.updatePreset(Preset.getPreset(presetId));
}).then(function() {
var params = {apply_filter: 'Y', clear_nav: 'Y'};
var fulfill = BX.delegate(promise.fulfill, promise);
var reject = BX.delegate(promise.reject, promise);
self.grid && self.grid.reloadTable('POST', params, fulfill, reject);
BX.onCustomEvent(window, 'BX.Main.Filter:apply', [filterId, {}, self, promise, applyParams]);
applyParams.autoResolve && promise.fulfill();
});
console.log(this.getFilterFieldsValues());
return promise;
}, |
результат вывода в моем варианте выглядит так:
Разумеется, вместо вывода в консоль, можно использовать ajax запрос для обновления пользовательских форм.
PS.
Данное применение фильтра выглядит как костыль, надеюсь услышать Ваши предложения.