Компонент main.ui.grid. Закрепление шапки таблицы table относительно div

Компонент main.ui.grid. Закрепление шапки таблицы table относительно div
02.06.2021

Задача вывести табличные данные в небольшом блоке, чтобы заголовок таблицы закреплялся не относительно страницы, а относительно этого блока.

Для вывода данных в битрикс24 удобно использовать компонент main.ui.grid.
Данные надо для него подготовить:



$data=[
 'GRID_ID' => 'grid_id_22',
 'HEADERS' => 
  array (
    'groupingColumn' => 
    array (
      'id' => 'groupingColumn',
      'name' => 'Менеджер',
      'default' => true,
    ),
    'report_id_1' => 
    array (
      'id' => 'report_id_1',
      'name' => 'Количество лидов',
      'default' => true,
    ),
   
  ),
  
   'ROWS' => 
  array (
    0 => 
    array (
      'id' => 1,
      'has_child' => false,
      'columns' => 
      array (
        'groupingColumn' => 'Иванов',
		'report_id_1' => '5'
)
)
)
];

Пример вызова компонента:

$APPLICATION->IncludeComponent(
            'bitrix:main.ui.grid',
            'newtemplate',
            array(
                'GRID_ID' => $data['GRID_ID'],
                'HEADERS' => $data['HEADERS'],
                'ROWS' => $data['ROWS'],
                'SHOW_ROW_CHECKBOXES' => false,
                'SHOW_GRID_SETTINGS_MENU' => false,
                'SHOW_ROW_ACTIONS_MENU'=> false,
                'SHOW_SELECTED_COUNTER' => false,
                'SHOW_TOTAL_COUNTER' => false,
                'ALLOW_SORT' => true,
                'ALLOW_PIN_HEADER'=>true,
                'ALLOW_HORIZONTAL_SCROLL'=>true,

            )
        );

Скопируем шаблон компонента в свой шаблон сайта и изменим стили и скрипт для закрепления шапки таблицы thead и скроллинга внутри блока. На самом деле закрепление шапки уже есть в функционале этого компонента, но оно работает относительно страницы с position:fixed и включается параметром 'ALLOW_PIN_HEADER'=>true. но мне нужно закрепление заголовка таблицы относительно блока в середине страницы, чтобы когда мышка попадала в область этого блока и таблицы, то строки таблицы tbody прокручивались, а заголовок Thead оставался на месте. В файле Style.css изменим стили класса ближайшего div, содержащего таблицу:

.main-grid-container {
	overflow-x: auto;
	overflow-y: auto;
	height:300px;
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
}

В файле script.js найдем класс BX.Grid.PinHeader и в нем изменим функции _onGridUpdate() и unpin() - запретим скрывать и уничтожать созданный блок с заголовком., закомментируем строки:

 /* BX.remove(this.getContainer());
	     this.create();
	      isPinned && this.pin();*/
и в функции unpin() изменим:
if (container) {
	        container.hidden = false;/*fixed header in widget*/
	      }

А в функции  startPin() position:fixed заменим на position:absolute;

А в функции create() изменим true на false
this.container.hidden = false;

Пример таблицы


Возврат к списку


Материалы по теме: