Filter
Отображает конструктор фильтров
Используется для создания фильтров на основе множества правил. Допустимые значения поля dataType свойства Columns: 'string', 'number', 'date', 'boolean', 'dictionary'. Допустимые значения поля allowedOperators свойства Columns для типа string: 'Contains', 'NotContain', 'Equals', 'NotEqual', 'BeginWith', 'EndsOn', 'Filled', 'NotFilled', 'Matches'. Допустимые значения поля allowedOperators свойства Columns для типа number: 'Equals', 'NotEqual', 'LessThan', "MoreThan", 'LessThanOrEqual', 'GreaterThanOrEqual', 'Between', 'Filled', 'NotFilled'. Допустимые значения поля allowedOperators свойства Columns для типа date: 'Between', 'LessThan', 'MoreThan', 'Filled', 'NotFilled'. Допустимые значения поля allowedOperators свойства Columns для типов boolean и dictionary: 'Equals', 'NotEqual', 'Filled', 'NotFilled'.
Свойства
| Имя | Описание | Тип | Значение по умолчанию | Возможные значения |
|---|---|---|---|---|
| Badge | Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет) | any | ||
| CSS | Массив строк-классов CSS-стилей компонента | array | ||
| Columns | Поля данных для фильтрации. В качестве значения может использоваться массив объектов с полями: alias, title, allowedOperators, dataType, dateFormat. Допустимые значения dateFormat перечислены в библиотеке moment.js. Если dateFormat не указан, по умолчанию используется формат ISO 8601. Допустимые значения полей dataType и allowedOperators см. в описании компонента | array | ||
| CombineConfig | Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную | object | ||
| CustomFilters | Массив настраиваемых фильтров | array | ||
| EnabledFilter | Фильтр, используемый при отображении области с компонентом Filter на странице приложения;при отсутствии заданного значения открывается вкладка компонента Accordion с предустановленными фильтрами | object | ||
| Fields | Поля данных для фильтрации. Устаревшее свойство, используется только для совместимости с версиями Платформы до 4.0 | array | ||
| Hidden | Признак состояния компонента Скрыт | boolean | False | |
| Hint | Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста | any | ||
| Id | Идентификатор компонента для навигации к нему на HTML-странице | string | ||
| MaxCountOfFilters | Максимальное количество правил фильтра в группе. Значение 0 используется для отключения этого ограничения. | number | 0 | |
| MaxLevelOfGroup | Максимальный уровень вложенности правил фильтра | number | 3 | |
| Model | Псевдоним свойств EnabledFilter и OutputEnabledFilter | array | ||
| OnChangeCustomFilters | Обработчик события об изменении customFilters, возвращающий объект со списком всех настраиваемых фильтров и последним измененным: { filters: IFilterItem[], lastFilter: IFilterItem} | any | ||
| OnClick | Обработчик события нажатия кнопки мыши | undefined | ||
| OnFilterSet | Обработчик события применения фильтров, возвращающий объект со списком всех фильтров | any | ||
| OnKeyDown | Обработчик события KeyDown | undefined | ||
| OnKeyUp | Обработчик события KeyUp | undefined | ||
| OnMouseDown | Обработчик события MouseDown | undefined | ||
| OnMouseEnter | Обработчик события MouseEnter | undefined | ||
| OnMouseLeave | Обработчик события MouseLeave | undefined | ||
| OnMouseMove | Обработчик события MouseMove | undefined | ||
| OnMouseOut | Обработчик события MouseOut | undefined | ||
| OnMouseOver | Обработчик события MouseOver | undefined | ||
| OnMouseUp | Обработчик события MouseUp | undefined | ||
| OnUnmount | Обработчик события Unmount | undefined | ||
| OptionalOpen | Признак открытия фильтра | boolean | False | |
| OutputCustomFilters | Привязка свойства customFilters отрисованного компонента к модели | any | ||
| OutputEnabledFilter | Привязка отрисованного включенного фильтра к модели (выходное значение) | any | ||
| OutputPresetFilters | Привязка свойства presetFilters отрисованного компонента к модели | any | ||
| PresetFilters | Предустановленные фильтры, которые не доступны пользователю для редактирования | array | ||
| ShowButton | Признак отображения кнопки открытия диалога настройки фильтра | boolean | True | |
| Slot | Метка для динамического добавления другого компонента по его идентификатору | string | ||
| Title | Заголовок диалога настройки фильтра | string | Filter title | |
| Tooltip | Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка | any | ||
| TraceId | Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента | string | ||
| Visible | Признак инверсии состояния компонента Скрыт | boolean | True |
Примеры
JSX:
<Group Mode={"Column"} >
<Group VerticalAlign="Center" Height="60px">
<Filter
MaxLevelOfGroup={7}
Columns={[
{alias: 'ProductName', title: 'Название продукта', allowedOperators : ['Contains'], dataType: 'string'},
{alias: 'ProductCompany', title: 'Компания', dataType: 'dictionary'},
{alias: 'Discounted', title: 'Со скидкой', dataType: 'boolean'},
{alias: 'UnitPrice', title: 'Цена', dataType: 'number'},
{alias: 'Date', title: 'Дата', dataType: '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": "And",
"fieldAlias": "ProductCompany",
"operator": "Equals",
"value": "FriendsCo",
"valid": true,
"valueEnd": ""
},
{
"logic": "And",
"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());
}}
Model-var="enabledFilter"
/>
<Text CSS={['pl-8']} Mode="Regular_14" Value="С предустановленными фильтрами" />
</Group>
<Group VerticalAlign="Center" Height="60px">
<Filter
Columns={[
{alias: 'ProductName', title: 'Название продукта', dataType: 'string'}
]}
/>
<Text CSS={['pl-8']} Mode="Regular_14" Value="Без предустановленных фильтров" />
</Group>
</Group>