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