Был ли способ получить самый левый столбец в таблице визуализации Google, чтобы он оставался фиксированным во время боковой прокрутки? - PullRequest
Новая
       7

Был ли способ получить самый левый столбец в таблице визуализации Google, чтобы он оставался фиксированным во время боковой прокрутки?

1 голос
/ 23 апреля 2010

Я хотел бы эмулировать стандартное поведение строки заголовка таблицы визуализации Google, но применимо ли это к первому столбцу.Кажется, это не встроенная функция, но мне интересно, можно ли это сделать с помощью какого-нибудь пользовательского CSS?

Ответы [ 3 ]

5 голосов
/ 24 апреля 2010

Я закончил обратным инжинирингом того, как Google выполняет верхний заголовок. Они создавали копию всей таблицы, помещали ее в div, позиционировали абсолютно и устанавливали высоту, равную высоте первого ряда. Это приводит к тому, что при прокрутке вниз по основному столу он остается зафиксированным сверху.

Боковая прокрутка более сложна, потому что при боковой прокрутке им нужен также заголовок для прокрутки. У CSS нет механизма для этого (поскольку он абсолютно расположен вне прокрутки), поэтому Google использует здесь javascript.

Чтобы эмулировать это поведение для фиксированного столбца, мы сначала делаем третий клон таблицы. Затем мы пройдемся по CSS-гимнастике, чтобы получить правильную ширину / высоту и положение. Наконец, мы присоединяем слушателя к событию onScroll главной таблицы, которое прокручивает таблицу заголовков в унисон. Функция $ .schollbarWidth () взята из этого плагина . 

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data);

var fullTable = $('#table > div > div:first');
var yHeader = fullTable.clone().insertAfter(fullTable);
yHeader.css('width', yHeader.children('tr td:first').outerWidth())
       .css('height', fullTable.innerHeight() - $.scrollbarWidth())
       .css('position', 'absolute')
       .css('top', '0px')
       .css('left', '0px')
       .css('overflow', 'hidden')

fullTable.scroll(function() {
  yHeader.scrollTop(fullTable.scrollTop());
});
2 голосов
/ 16 августа 2013

Вместо использования .children () я использовал .find (), и теперь все в порядке. Кроме того, чтобы он работал после сортировки столбцов, нам нужно добавить прослушиватель событий и снова запустить весь код. Вот примерный код: 

table.draw(data_summary_table, {allowHtml : true, width : '880'});    

function frozenColumn() {   
var fullTable = $('#summary_table > div > div:first');
var yHeader = fullTable.clone().insertAfter(fullTable);
yHeader.css('width', yHeader.find("tr td:first-child").outerWidth())
       .css('height', fullTable.innerHeight() - $.scrollbarWidth())
       .css('position', 'absolute')
       .css('top', '0px')
       .css('left', '0px')
       .css('overflow', 'hidden')

fullTable.scroll(function() {
  yHeader.scrollTop(fullTable.scrollTop());
}); 

}

frozenColumn();

google.visualization.events.addListener(table, 'sort',
      function(event) {
frozenColumn();
      });
0 голосов
/ 02 декабря 2014

В некоторых случаях браузер выдает ошибку типа «$ .scrollbarWidth не является функцией». Просто измените его на собственность. $ .ScrollbarWidth. 

table.draw(data_summary_table, {allowHtml : true, width : '880'});    

function frozenColumn() { 

    var fullTable = $('#summary_table > div > div:first');
    var yHeader = fullTable.clone().insertAfter(fullTable);
    yHeader.css('width', yHeader.find("tr td:first-child").outerWidth())
        .css('height', fullTable.innerHeight() - $.scrollbarWidth)
        .css('position', 'absolute')
        .css('top', '0px')
        .css('left', '0px')
        .css('overflow', 'hidden')

        fullTable.scroll(function() {
        yHeader.scrollTop(fullTable.scrollTop());
        }); 


}

// Прикрепленное событие 

google.visualization.events.addListener(table, 'ready', frozenColumn);
google.visualization.events.addListener(table, 'page', frozenColumn);
google.visualization.events.addListener(table, 'sort', frozenColumn);
...