Задача вывести табличные данные в небольшом блоке, чтобы заголовок таблицы закреплялся не относительно страницы, а относительно этого блока.
Для вывода данных в битрикс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;