1

我希望模拟标准的谷歌可视化表格标题行行为，但让它适用于第一列。这似乎不是一个内置功能，但我想知道它是否可以通过一些自定义 CSS 来完成？

4

3 回答 3

5

我最终对谷歌如何完成顶部标题进行了逆向工程。他们正在创建整个表格的副本，将其放在一个 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());
});
于 2010-04-24T06:19:01.500 回答
2

我使用 .find() 而不是使用 .children() ，现在可以了。此外，为了在列排序后使其工作，我们必须添加一个事件侦听器并再次运行整个代码。这是一个示例代码：

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();
      });
于 2013-08-16T16:21:42.150 回答
0

在某些情况下，浏览器会给出类似“$.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);
于 2014-12-02T10:05:58.960 回答