是否有办法让Google可视化表格中最左边的列在侧滚时保持固定？

Question

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

Answer 1

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

横向滚动更复杂,因为当侧向滚动时,他们需要标题也滚动.CSS没有这种机制(因为它绝对位于滚动之外),所以谷歌在这里使用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());
});