Как зафиксировать шапку табличного списка при прокрутке?

[alcompstudio]

Приветствую всех, уважаемые пользователи!

Возникла необходимость в закрепленной шапке табличных списков при прокрутке страницы вниз (иногда разбивка на страницы не удовлетворяет отражению нужной информации, нужна как бы "вся картина" в таблице целиком).

В Руководителе на данный момент реализована полезная функция закрепления нескольких столбцов а вот, не менее важной функции - зафиксированной при прокрутке до верха (браузера или определенной высоты) шапки - пока нет.



Я, к сожалению, практически не разбираюсь в скриптах, верстке, но хотелось бы в результате что-то подобное:

https://codepen.io/jgx/pen/wiIGc

Там получается можно даже применять для нескольких таблиц, расположенных "в высоту" на странице (можно, например, применять для страниц с таблицами отчетов, очень удобно будет).

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

Надеюсь на вашу помощь

[support]

Интересная идя. Можно, к примеру, в настройках списка добавить опцию "Отобразить все записи" и в этом случаи будет использоваться фиксированный заголовок в таблице.

Добавил в план.

[alcompstudio]

Хочу попробовать "кустарным" методом реализовать данную возможность, т.к. не силен в программировании...

Тут, если я правильно понимаю из указанного примера, нужно разместить скрипт (отдельным файлом), отвечающий за фиксацию шапки таблицы, добавить классы, которые формируют фиксацию и прикрутить их на генерируемой PHP кодом страничке, где могут быть табличные списки.

Подскажите (если это конечно не сложно), какой (может какие) файлы отвечают за генерацию готовой страницы с таблицами? И как туда "добавить" (подключить) файл скрипта. И куда лучше "вместить" новые классы CSS, которые "формируют" фиксацию шапки таблицы (в основной файл стиля приложения, или же в файл стиля установленной темы) ?

Сложно ли это в реализации. Я хочу поэкспериментировать, но могу только на уровне HTML . Вот где это в PHP-файлах разместить, не знаю... Если получится - тут напишу ответ).

[support]

modules\items\actions\listing.php - это файл, который отвечает за вывод таблицы с данными. Пробуйте, но скорей всего, что-то с чем-то будет конфликтовать:)

[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 файле?

Или тут намного сложнее?

[support]

ссылки на CSS и JS можно прописать в /template/layout.php

[support]

Александр, вроде как получилось реализовать эту возможность.
Гляньте в видео как получилось https://youtu.be/pHcuSPmXZX8

[alcompstudio]

Да, это оно!! И ширину столбцов можно мышкой менять - это круть!

[userspb]

Классно когда ждать вживую ?

[support]

2.4