Документация для разработчиков
Темная тема

main.ui.grid и main.ui.filter

Рассмотрим работу с компонентами main.ui.grid (классы Bitrix\Main\Grid) и main.ui.filter (классы Bitrix\Main\UI\Filter).

Компоненты

КомпонентОписание
main.ui.gridКомпонент для визуального представления данных в виде таблицы.
main.ui.filterВыводит фильтр + поиск О том, как выглядит работа с фильтром можно посмотреть в уроке Фильтр (новый интерфейс) в курсе
Контент-менеджер.
.

Компоненты являются системными и в визуальном редакторе не отображаются. В физической структуре их можно найти в папке /bitrix/components/bitrix/[название_компонента]

Связка компонентов

Компоненты могут работать в связке, что позволяет вывести информацию в виде таблицы с возможностью фильтрации и поиска.

Для связи фильтра и таблицы необходимо передать данные из фильтра в грид. Общая схема выглядит так:
// Подключаем фильтр.
$APPLICATION->includeComponent(
	"bitrix:main.ui.filter",
	"",
	[
		"FILTER_ID" => "DEMO_FILTER",
		"GRID_ID" => "DEMO_GRID",
		// ...
	]
);

// Получаем данные для фильтрации.
$filterOptions = new \Bitrix\Main\UI\Filter\Options("DEMO_FILTER");
$filterFields = $filterOptions->getFilter([
	['id' => 'DATE', 'name' => 'Дата', 'type' => 'date'],
	['id' => 'IS_SPEND', 'name' => 'Тип операции',
	'type' => 'list',

	'params' => ['multiple' => 'Y']
	],
	['id' => 'AMOUNT', 'name' => 'Сумма', 'type' => 'number'],
	['id' => 'PAYER_INN', 'name' => 'ИНН Плательщика', 'type' => 'number'],
	['id' => 'PAYER_NAME', 'name' => 'Плательщик'],
]);

// Конвертируем то, что вернул фильтр в формат пригодный для выборки данных.
// (формат зависит от того, как и с помощью чего планируется выбирать данные)
$filter = [];
foreach ($filterFields as $key => $value)
{
	// ...
}

// Получаем данные на основе сконвертированного фильтра.
$data = \AnyClass::getList(..., $filter);

// Конвертируем данные в формат пригодный для грида
$rows = [];
foreach ($data as $key => $value)
{
	// ...
}

// Подключаем грид и передаем ему данные
$APPLICATION->includeComponent(
	"bitrix:main.ui.grid",
	"",
	[
		"GRID_ID" => "DEMO_GRID",
		"ROWS" => $rows,
		// ...
	]
);


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
R B
Сообщение не промодерировано, возможны ошибки и неточности.
, вы нашли решение? У меня дефолтный компонент main.ui.grid работает нормально, но если копирую дефолтный, то в нем у каждого элемента не работает функционал: бургер для действий, чекбокс и тд. Хотя это такой же компонент как дефолтный
1
foxel-devtur
Сообщение не промодерировано, возможны ошибки и неточности.
при переназначении шаблона main.ui.grid - перестает работать чекбокс выбора элемента в списке. валится скриптовая ошибка, как будто где-то жестко путь к шаблону прописан
0
Эдуард
Сообщение не промодерировано, возможны ошибки и неточности.
Код
$filterOptions = new \Bitrix\Main\UI\Filter\Options("DEMO_FILTER");
$filterFields = $filterOptions->getFilter([
           ['id' => 'DATE', 'name' => 'Дата', 'type' => 'date'],
           ['id' => 'IS_SPEND', 'name' => 'Тип операции',
          'type' => 'list',
         
          'params' => ['multiple' => 'Y']
          ],
          ['id' => 'AMOUNT', 'name' => 'Сумма', 'type' => 'number'],
          ['id' => 'PAYER_INN', 'name' => 'ИНН Плательщика', 'type' => 'number'],
          ['id' => 'PAYER_NAME', 'name' => 'Плательщик'],
]);

В примере из документации $filterFields возвращает не пригодный для фильтрации массив:
Код
[
    'ID_numsel'      => 'more',
    'ID_from'        => '0',
    'ID_to'          => '',
    'DATE_datesel'   => 'YESTERDAY',
    'DATE_month'     => '5',
    'DATE_quarter'   => 2,
    'DATE_year'      => '2023',
    'DATE_from'      => '20.05.2023 00:00:00',
    'DATE_to'        => '20.05.2023 23:59:59',
    'PRESET_ID'      => 'tmp_filter',
    'FILTER_ID'      => 'tmp_filter',
    'FILTER_APPLIED' => true,
    'FIND'           => '',
];

Чтобы сконвертировать его, есть* метод \Bitrix\Main\UI\Filter\Type::getLogicFilter($filterFields, $sourceFields)
Код
$sourceFields = [
    ['id' => 'ID', 'name' => 'ID', 'type' => 'number', 'default' => true],
    ['id' => 'DATE_UPDATE', 'name' => 'Дата обновления', 'type' => 'date', 'default' => true]
];
$filterOptions = new \Bitrix\Main\UI\Filter\Options("DEMO_FILTER");
$filterFields = $filterOptions->getFilter($sourceFields);

$logicFilter = \Bitrix\Main\UI\Filter\Type::getLogicFilter($filterFields, $sourceFields);

/*
$logicFilter = [
    '>ID'    => '0',
    '>=DATE' => '20.05.2023 00:00:00',
    '<=DATE' => '20.05.2023 23:59:59',
];
*/
* - как минимум в версии модуля main 21.600.500
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх