Filter
Отображает конструктор фильтров
Используется для создания фильтров на основе множества правил.
Свойства
| Имя | Описание | Тип | Значение по умолчанию | Возмож ные значения |
|---|---|---|---|---|
| CustomFilters | Массив настраиваемых фильтров | array | ||
| EnabledFilter | при отсутствии заданного значения открывается вкладка компонента Accordion с предустановленными фильтрами | object | ||
| Fields | Поля данных для фильтрации | array | ||
| MaxCountOfFilters | Максимальное количество правил фильтра в группе. Значение 0 используется для отключения этого ограничения. | number | ||
| MaxLevelOfGroup | Максимальный уровень вложенности правил фильтра | number | 3 | |
| Model | Псевдоним свойств EnabledFilter и OutputEnabledFilter | array | ||
| OnChangeCustomFilters | Обработчик события об изменении customFilters, возвращающий объект со списком всех настраиваемых фильтров и последним измененным: { filters: IFilterItem[], lastFilter: IFilterItem} | any | ||
| OnFilterSet | Обработчик события применения фильтров, возвращающий объект со списком всех фильтров | any | ||
| OptionalOpen | Признак открытия фильтра | boolean | ||
| OutputCustomFilters | Привязка свойства customFilters отрисованного компонента к модели | any | ||
| OutputEnabledFilter | Привязка отрисованного включенного фильтра к модели (выходное значение) | any | ||
| OutputPresetFilters | Привязка свойства presetFilters отрисованного компонента к модели | any | ||
| PresetFilters | Предустановленные фильтры, которые не доступны пользователю для редактирования | array | ||
| ShowButton | Признак отображения кнопки открытия диалога настройки фильтра | boolean | True | |
| Title | Заголовок диалога настройки фильтра | string | Filter title |
Примеры
JSX:
<Group Mode={"Column"} >
<Group VerticalAlign="Center" Height="60px">
<Filter
MaxLevelOfGroup={7}
Fields={[
{fieldAlias: 'ProductName', fieldTitle: 'Название продукта', allowedOperators : ['Contains'], fieldType: 'string'},
{fieldAlias: 'ProductCompany', fieldTitle: 'Компания', fieldType: 'dictionary',
value: { 'FriendsCo' : 'FriendsCo',
'MyCompany' : 'MyCompany',
'YourCompany' : 'YourCompany'}},
{fieldAlias: 'Discounted', fieldTitle: 'Со скидкой', fieldType: 'boolean'},
{fieldAlias: 'UnitPrice', fieldTitle: 'Цена', fieldType: 'number'},
{fieldAlias: 'Date', fieldTitle: 'Дата', fieldType: 'date'},
]}
CustomFilters={(customFilters) => customFilters}
PresetFilters={[{
name: 'First system filter (example of system filter)',
id: '1',
enabled: false,
filterType: 'System',
filter: {
"logic": "And",
"name": "parent",
"filters": [
{
"logic": "And",
"fieldAlias": "Date",
"operator": "Equals",
"value": "2023-08-30T20:00:00.000Z",
"valid": true,
"valueEnd": ""
},
{
"logic": "And",
"name": "Группа 1",
"filters": [
{
"logic": "Or",
"fieldAlias": "ProductCompany",
"operator": "Equals",
"value": "FriendsCo",
"valid": true,
"valueEnd": ""
},
{
"logic": "Or",
"fieldAlias": "ProductCompany",
"operator": "Equals",
"value": "MyCompany",
"valid": true,
"valueEnd": ""
},
{
"logic": "And",
"name": "Группа 1.1",
"filters": [
{
"logic": "Or",
"fieldAlias": "UnitPrice",
"operator": "Equals",
"value": "5",
"valid": true,
"valueEnd": ""
},
{
"logic": "Or",
"fieldAlias": "UnitPrice",
"operator": "Equals",
"value": "10",
"valid": true,
"valueEnd": ""
}
],
"valid": true
},
{
"logic": "And",
"name": "Группа 1.2",
"filters": [
{
"logic": "Or",
"fieldAlias": "ProductName",
"operator": "Contains",
"value": "organic11",
"valid": true
},
{
"logic": "Or",
"fieldAlias": "ProductName",
"operator": "Contains",
"value": "cranberry22",
"valid": true
}
],
"valid": true
}
],
"valid": true
},
{
"logic": "And",
"fieldAlias": "Discounted",
"operator": "Equals",
"value": true,
"valueEnd": "",
"valid": true
}
]
}
}]}
OutputCustomFilters-var="customFilters"
OnChangeCustomFilters={() => {
console.log(getEvent());
}}
EnabledFilter={(enabledFilter) => enabledFilter}
OutputEnabledFilter-var="enabledFilter"
/>
<Text CSS={['pl-8']} Mode="Regular_14" Value="С предустановленными фильтрами" />
</Group>
<Group VerticalAlign="Center" Height="60px">
<Filter
Fields={[
{fieldAlias: 'ProductName', fieldTitle: 'Название продукта', fieldType: 'string'}
]}
/>
<Text CSS={['pl-8']} Mode="Regular_14" Value="Без предустановленных фильтров" />
</Group>
</Group>