Предыдущая реализация main.ui.grid

Описание

Компонент main.ui.grid (классы Bitrix\Main\Grid) выводит информацию в табличной форме. Является системным компонентом.

В физической структуре его можно найти в папке /bitrix/components/bitrix/main.ui.grid.

Параметры

Параметр	Тип	Описание
GRID_ID	string	Идентификатор грида.
HEADERS	array	Массив с заголовками столбцов таблицы. Простейший пример массива array ( 'id' => 'COMPANY_UF_CRM_613B2B9A90EDA', // уникальный id 'name' => 'Название колонки как его видит пользователь', 'sort' => 'COMPANY_UF_CRM_613B2B9A90EDA', //сортировка 'default' => false, // (bool) показывать поле в гриде 'editable' => false, // (bool) можно ли редактировать поле inline 'type' => 'text', // тип колонки, все типы тут /modules/main/lib/grid/types.php 'iconUrl' => '/bitrix/images/crm/grid_icons/company.svg', // ссылка на иконку 'iconTitle' => 'Title иконки, как его видит пользователь при наведении на иконку', 'section_id' => 'COMPANY', // id секции, для группировки полей в окне выбора показа полей, //т.е. это поле (колонка) попадет в секцию с таким названием 'title' => 'Текст подсказки, возникающей при наведении на заголовок столбца', 'align' => 'left', // выравнивание значения (left, right, center) 'width' => '350', // ширина столбца 'hint' => 'Текст подсказки, возникающей при наведении на значок ? в заголовке столбца таблицы', 'hintInteractivity' => true, // если true, то с подсказкой можно взаимодействовать (выделять текст, // нажимать на кнопки в подсказке); если false, то при снятии курсора со значка ? подсказка исчезнет 'hintHtml' => false, // если true, то текст подсказки выводится в формате html )
ROWS	array	Массив с значениями По ключу data передаём массив с данными ячеек. таблицы и действиями По ключу actions передаем массив действий. в контекстном меню. Простейший пример массива 'ROWS' => [ [ 'data' => [ //Данные ячеек "ID" => 1, "NAME" => "Название 1", "AMOUNT" => 1000, "PAYER_NAME" => "Плательщик 1" ], 'actions' => [ //Действия над ними [ 'text' => 'Редактировать', 'onclick' => 'document.location.href="/accountant/reports/1/edit/"' ], [ 'text' => 'Удалить', 'onclick' => 'document.location.href="/accountant/reports/1/delete/"' ] ], ], [ 'data' => [ //Данные ячеек "ID" => 2, "NAME" => "Название 2", "AMOUNT" => 3000, "PAYER_NAME" => "Плательщик 2" ], 'actions' => [ //Действия над ними [ 'text' => 'Редактировать', 'onclick' => 'document.location.href="/accountant/reports/2/edit/"' ], [ 'text' => 'Удалить', 'onclick' => 'document.location.href="/accountant/reports/2/delete/"' ] ], ] ];
TOTAL_ROWS_COUNT	string	Количество отфильтрованных элементов в таблице всего.
SHOW_ROW_CHECKBOXES	bool	Показывать чекбоксы у строк для множественных действий.
NAV_OBJECT	object	Объект для постраничной навигации.
AJAX_MODE	string	Активирует режим ajax.
AJAX_ID	string	Ajax ID берется из компонента фильтра.
PAGE_SIZES	array	Массив для выбора кол-ва элементов на странице.
AJAX_OPTION_JUMP	string	Если пользователь совершит AJAX-переход, то при установленой опции по окончании загрузки произойдет прокрутка к началу компонента.
SHOW_CHECK_ALL_CHECKBOXES	bool	Показывать "Выбрать все".
SHOW_ROW_ACTIONS_MENU	bool	Отображение меню действий для элемента таблицы.
SHOW_GRID_SETTINGS_MENU	bool	Отображение кнопки настройки списка.
SHOW_NAVIGATION_PANEL	bool	Отображать панель навигации.
SHOW_PAGINATION	bool	Отображать кнопки постраничной навигации ("Предыдущая", "Все", "Следующая").
SHOW_SELECTED_COUNTER	bool	Показывать "Выбрано элементов".
SHOW_TOTAL_COUNTER	bool	Показывать "Всего элементов".
SHOW_PAGESIZE	bool	Выводить выбор количества элементов на странице.
ACTION_PANEL	array	Определяет панель групповых действий (передаётся массив с кнопками и действиями).
SHOW_ACTION_PANEL	bool	Разрешает отображение панели групповых действий Панель отобразится только если сама панель определена в параметре ACTION_PANEL. .
ALLOW_COLUMNS_SORT	bool	Параметр разрешает или запрещает сортировку колонок перетаскиванием (т.е. менять колонки местами перетаскиванием мышью).
ALLOW_COLUMN_RESIZE	bool	Разрешает или запрещает изменение ширины колонок.
ALLOW_HORIZONTAL_SCROLL	bool	Будет доступна горизонтальная прокрутка.
ALLOW_SORT	bool	Разрешить сортировку.
ALLOW_PIN_HEADER	bool	Разрешать закреплять шапку таблицы.
AJAX_OPTION_HISTORY	bool	Когда пользователь выполняет AJAX-переходы, то при включенной опции можно использовать кнопки браузера "Назад" и "Вперед".
ENABLE_COLLAPSIBLE_ROWS	bool	Включает сворачивание/разворачивание строк.
ENABLE_FIELDS_SEARCH	bool	Включает возможность фильтрации по названию поля.
HEADERS_SECTIONS	array	Массив для группировки полей в main.ui.filter вида: array ( 0 => array ( 'id' => 'DEAL', 'name' => 'Мое название', 'default' => true, - в эту секцию скидываем все поля, у которых явно не задана привязка к секции 'selected' => true, - секция показывается по умолчанию ), 1 => array ( 'id' => 'CONTACT', 'name' => 'Контакт', 'selected' => true, ), 2 => array ( 'id' => 'COMPANY', 'name' => 'Компания', 'selected' => true, ), ) С версии 22.500.0 добавлена возможность выводить всплывающие подсказки у секций колонок: [ 'id' => 'PRODUCT', 'name' => 'Товар', 'hint' => 'Свойства товара для вывода в таблице', // текст всплывающей подсказки 'hintInteractivity' => true, // если true, то с подсказкой можно взаимодействовать (выделять текст, // нажимать на кнопки в подсказке); если false, то при снятии курсора со значка ? подсказка исчезнет 'hintHtml' => false, // если true, то текст подсказки выводится в формате html 'selected' => true, ],

Пример вызова

<?
$grid_options = new Bitrix\Main\Grid\Options('report_list');
$sort = $grid_options->GetSorting(['sort' => ['ID' => 'DESC'], 'vars' => ['by' => 'by', 'order' => 'order']]);
$nav_params = $grid_options->GetNavParams();

$nav = new Bitrix\Main\UI\PageNavigation('report_list');
$nav->allowAllRecords(true)
	->setPageSize($nav_params['nPageSize'])
	->initFromUri();

$APPLICATION->IncludeComponent(
	'bitrix:main.ui.grid',
	'',
	[
	'GRID_ID' => 'report_list', 
	'COLUMNS' => [
		['id' => 'ID', 'name' => 'ID', 'sort' => 'ID', 'default' => true], 
		['id' => 'DATE', 'name' => 'Дата', 'sort' => 'DATE', 'default' => true], 
		['id' => 'AMOUNT', 'name' => 'Сумма', 'sort' => 'AMOUNT', 'default' => true], 
		['id' => 'PAYER_INN', 'name' => 'ИНН Плательщика', 'sort' => 'PAYER_INN', 'default' => true], 
		['id' => 'PAYER_NAME', 'name' => 'Плательщик', 'sort' => 'PAYER_NAME', 'default' => true], 
		['id' => 'IS_SPEND', 'name' => 'Тип операции', 'sort' => 'IS_SPEND', 'default' => true], 
		
	'ROWS' => $list,
	'SHOW_ROW_CHECKBOXES' => true, 
	'NAV_OBJECT' => $nav, 
	'AJAX_MODE' => 'Y', 
	'AJAX_ID' => \CAjax::getComponentID('bitrix:main.ui.grid', '.default', ''), 
	'PAGE_SIZES' => [ 
		['NAME' => "5", 'VALUE' => '5'], 
		['NAME' => '10', 'VALUE' => '10'], 
		['NAME' => '20', 'VALUE' => '20'], 
		['NAME' => '50', 'VALUE' => '50'], 
		['NAME' => '100', 'VALUE' => '100'] 
		], 
	'AJAX_OPTION_JUMP'          => 'N', 
	'SHOW_CHECK_ALL_CHECKBOXES' => true, 
	'SHOW_ROW_ACTIONS_MENU'     => true, 
	'SHOW_GRID_SETTINGS_MENU'   => true, 
	'SHOW_NAVIGATION_PANEL'     => true, 
	'SHOW_PAGINATION'           => true, 
	'SHOW_SELECTED_COUNTER'     => true, 
	'SHOW_TOTAL_COUNTER'        => true, 
	'SHOW_PAGESIZE'             => true, 
	'SHOW_ACTION_PANEL'         => true, 
	'ACTION_PANEL'              => [ 
		'GROUPS' => [ 
			'TYPE' => [ 
				'ITEMS' => [ 
					[ 
						'ID'    => 'set-type', 
						'TYPE'  => 'DROPDOWN', 
						'ITEMS' => [ 
							['VALUE' => '', 'NAME' => '- Выбрать -'], 
							['VALUE' => 'plus', 'NAME' => 'Поступление'], 
							['VALUE' => 'minus', 'NAME' => 'Списание'] 
							] 
					], 
				], 
			] 
		], 
	], 
	'ALLOW_COLUMNS_SORT'        => true, 
	'ALLOW_COLUMNS_RESIZE'      => true, 
	'ALLOW_HORIZONTAL_SCROLL'   => true, 
	'ALLOW_SORT'                => true, 
	'ALLOW_PIN_HEADER'          => true, 
	'AJAX_OPTION_HISTORY'       => 'N' 
	]
);?>

Добавление кнопок

Для добавления кнопок в ACTION_PANEL удобно использовать класс \Bitrix\Main\Grid\Panel\Snippet, который позволяет быстро создать какую-то типовую кнопку или действие для панели грида. Пример:

// Создаем экземпляр класса:
$snippets = new \Bitrix\Main\Grid\Panel\Snippet();

// С помощью нужного метода получаем уже готовую кнопку или действие.
// Например для кнопки "Удалить":
$removeButton = $snippets->getRemoveButton();