Страница 1 из 2
Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 20 апр 2017, 13:43
alcompstudio
Приветствую всех, уважаемые пользователи!
Возникла необходимость в закрепленной шапке табличных списков при прокрутке страницы вниз (иногда разбивка на страницы не удовлетворяет отражению нужной информации, нужна как бы "вся картина" в таблице целиком).
В Руководителе на данный момент реализована полезная функция закрепления нескольких столбцов а вот, не менее важной функции - зафиксированной при прокрутке до верха (браузера или определенной высоты) шапки - пока нет.
Я, к сожалению, практически не разбираюсь в скриптах, верстке, но хотелось бы в результате что-то подобное:
https://codepen.io/jgx/pen/wiIGc
Там получается можно даже применять для нескольких таблиц, расположенных "в высоту" на странице (можно, например, применять для страниц с таблицами отчетов, очень удобно будет).
Подскажите можно ли применить скрипт, указанный по ссылке к Руководителю (если да - то как и куда его "влепить"

, как подключить и к чему) ? Или может, кто-то реализовывал в Руководителе подобное - подскажите что нужно сделать (желательно для уровня "чайника" типа: открой такой-то файл, вставь туда такой-то код, сохрани, залей на сервер и т.п.)
Надеюсь на вашу помощь

Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 21 апр 2017, 13:04
support
Интересная идя. Можно, к примеру, в настройках списка добавить опцию "Отобразить все записи" и в этом случаи будет использоваться фиксированный заголовок в таблице.
Добавил в план.
Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 01 июл 2017, 15:45
alcompstudio
Хочу попробовать "кустарным" методом реализовать данную возможность, т.к. не силен в программировании...
Тут, если я правильно понимаю из указанного примера, нужно разместить скрипт (отдельным файлом), отвечающий за фиксацию шапки таблицы, добавить классы, которые формируют фиксацию и прикрутить их на генерируемой PHP кодом страничке, где могут быть табличные списки.
Подскажите (если это конечно не сложно), какой (может какие) файлы отвечают за генерацию готовой страницы с таблицами? И как туда "добавить" (подключить) файл скрипта. И куда лучше "вместить" новые классы CSS, которые "формируют" фиксацию шапки таблицы (в основной файл стиля приложения, или же в файл стиля установленной темы) ?
Сложно ли это в реализации. Я хочу поэкспериментировать, но могу только на уровне HTML

. Вот где это в PHP-файлах разместить, не знаю... Если получится - тут напишу ответ).
Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 02 июл 2017, 12:45
support
modules\items\actions\listing.php - это файл, который отвечает за вывод таблицы с данными. Пробуйте, но скорей всего, что-то с чем-то будет конфликтовать:)
Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 02 июл 2017, 20:21
alcompstudio
Да.. открыл файл .. и все, на этом действия мои прекратились
Я думал как-то так чтобы подключить (открыл страницу с таблицей в браузере через Ctrl+U):
Т.е. CSS и JS - как-то в PHP-файле можно прописать/подключить ссылкой на файлы?
Я так планировал сделать:
1. Создать новую таблицу стилей - записать в файл типа tablescroll.css такого содержания:
Код: Выделить всё
.container{
width:90%;
margin:auto;
}
.fixed{
top:0;
position:fixed;
width:auto;
display:none;
border:none;
}
.scrollMore{
margin-top:600px;
}
Т.е. там классы - .container, который видимо "оборачивает" таблицы
.fixed - который, собственно отвечает за фиксацию шапки таблиц
.scrollMore - тут пока не знаю... что за расстояние от верха.
не знаю, возможно тут прописать...
и файл скрипта:
Код: Выделить всё
;(function($) {
$.fn.fixMe = function() {
return this.each(function() {
var $this = $(this),
$t_fixed;
function init() {
$this.wrap('<div class="container" />');
$t_fixed = $this.clone();
$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
resizeFixed();
}
function resizeFixed() {
$t_fixed.find("th").each(function(index) {
$(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
});
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
if(offset < tableOffsetTop || offset > tableOffsetBottom)
$t_fixed.hide();
else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
$t_fixed.show();
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
})(jQuery);
$(document).ready(function(){
$("table").fixMe();
$(".up").click(function() {
$('html, body').animate({
scrollTop: 0
}, 2000);
});
});
Вот таким способом думал подключить и экспериментировать... Но вот где прописать ссылки на CSS и JS файлы в этом PHP файле?
Или тут намного сложнее?

Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 02 июл 2017, 20:25
support
ссылки на CSS и JS можно прописать в /template/layout.php
Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 19 окт 2018, 22:43
support
Александр, вроде как получилось реализовать эту возможность.
Гляньте в видео как получилось
https://youtu.be/pHcuSPmXZX8
Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 19 окт 2018, 23:40
alcompstudio
Да, это оно!! И ширину столбцов можно мышкой менять - это круть!

Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 30 окт 2018, 16:08
userspb
Классно когда ждать вживую ?
Re: Как зафиксировать шапку табличного списка при прокрутке?
Добавлено: 30 окт 2018, 18:05
support
2.4