javascript - 有没有办法让谷歌可视化表中最左边的列在横向滚动时保持固定？

Question

我想模仿标准的谷歌可视化表标题行行为，但将其应用于第一列。这似乎不是内置功能，但我想知道它是否可以通过一些自定义 CSS 来实现？

Answer 1

我最终对谷歌如何完成顶部标题进行了逆向工程。他们正在创建整个表格的副本，将其放在一个 div 中，对其进行绝对定位并将高度设置为等于第一行的高度。这实现了当您向下滚动主表时它固定在顶部的效果。

横向滚动更复杂，因为横向滚动时它们需要标题也滚动。 CSS 没有用于此的机制(因为它绝对位于滚动内容之外)，因此 Google 在这里使用 javascript。

为了模拟固定列的这种行为，我们首先创建表的第三个克隆。然后我们通过一些 CSS 体操来获得正确的宽度/高度和位置。最后，我们将一个监听器附加到主表的 onScroll 事件上，该事件同步滚动表头表。 $.schollbarWidth() 函数来自 this plugin .

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());
});