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

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

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

侧边滚动更复杂，因为侧边滚动时需要标题也滚动。CSS没有实现这一点的机制（因为它完全位于滚动之外），所以Google在这里使用javascript

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

---

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

侧边滚动更复杂，因为侧边滚动时需要标题也滚动。CSS没有实现这一点的机制（因为它完全位于滚动之外），所以Google在这里使用javascript

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

我没有使用.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();
      });

我没有使用.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();
      });

---

在某些情况下，浏览器会出现类似“$.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);

---

在某些情况下，浏览器会出现类似“$.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);

---

我不能让它工作。你能在网页的上下文中提供这个例子吗？我只是把桌子放在下面。fullTable应该是div还是table元素？我也是这样做的。虽然更深入一些，但我没法让它发挥作用。你能在网页的上下文中提供这个例子吗？我只是把桌子放在下面。fullTable应该是div还是table元素？我也是这样做的。虽然更深入。