如何在 HTML 表格上复制“冻结窗格”功能？

Posted 2023-02-22

【中文标题】如何在 HTML 表格上复制“冻结窗格”功能？

【英文标题】：How do you duplicate "freeze pane" functionality on an HTML table?

【发布时间】：2011-10-28 06:14:15

【问题描述】：

我正在为我的工作开发的 ASP.NET 项目中有一个小部件。它必须是 300 像素宽，不能再宽了。不幸的是，事实证明，对于这么小的小部件，他们想要的东西相当复杂。这是我现在拥有的：

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

如您所见，这是一个 jQuery UI 手风琴控件。随着每个手风琴窗格的展开，将进行 ajax 调用以异步加载其内容。现在它会输出一个包含所需数据的 html 表。该表位于样式为 overflow: auto; 的 DIV 中，因此我们在底部和右侧都有滚动条。

我的问题是我想要一些非常自定义的功能（比如 excel 中的冻结窗格功能）。左右滚动时，我希望包括标题在内的所有行左右滚动除了最左边的列“产品名称”。像这样：

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

上下滚动时，我希望所有列，包括左列，都可以上下滚动除了的标题行。像这样：

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

实现此功能的最佳方法是什么？或者有什么办法？

【问题讨论】：

+1 提出了很好的问题，其中包含您想要完成的确切内容的图片。而且，因为这看起来是一个棘手的问题.. ;)

+1 和我可以看到自己将来使用的东西的最爱。

【参考方案1】：

我构建了一些类似的东西，但简单得多：我希望表格的第一行（标题）被冻结，而数据行垂直滚动。我将它实现为 2 个不同的表格，每个表格都有固定宽度的单元格，每个单元格都在自己的 DIV 中。 “header” div 只是静止不动，“body” div 使用 overflow:auto 来滚动。

您的问题更复杂，因为您想在两个轴上“冻结窗格”，并支持在两个轴上滚动（我有更多的空间可以使用，并且不必考虑水平滚动全部）。不过，我想知道您是否可以从那个位置开始工作……

定义4个div：

NW：这个永远不会滚动。这是您示例中的“产品名称”单元格 NE：这个只能水平滚动。这是您示例中的顶部/标题行 SW：这个只能垂直滚动。这是您示例中的左侧列 SE：这个可以双向滚动。这是您示例中的主要数据网格

使用 4 个 DIV，您将处理 4 个不同的表格，因此我们需要保持它们的单元格宽度和单元格高度同步。理想情况下，如果我们可以将它们设为固定值，我们可以在渲染时执行此操作。否则，我们也许可以编写一些客户端 jquery/JS 来在页面首次加载（或调整大小）时迭代 SE 表中的单元格，并强制其他表的大小与它们匹配。

有了 4 个 DIV，我们还需要同步滚动：当 SE 水平滚动时，NE 必须滚动到相同的位置。当 SE 垂直滚动时，SW 必须滚动到相同的位置。我怀疑必须有一些我们可以挂钩的客户端滚动事件，以检测 SE 何时滚动。在这些事件中，我们应该能够强制 NE 和/或 SW 以相同的方式滚动。

对不起，这是一个如此模糊/抽象的回应。实现这样的事情的本质需要更多的时间，而不是我可以轻松地从我的主要工作中偷走。但这是我脑子里一直在喋喋不休的东西，所以想和你分享一下。我希望它至少能让你更接近解决方案。干杯！

【讨论】：

不要道歉，感谢您的反馈。这实际上正是我试图走的路线，但由于小屏幕房地产，我遇到了一些障碍。比如竖条直到横条一直向右滚动后才会出现；但这是我自己的代码的问题。我也讨厌必须保持单元格宽度和高度不变，以便它们匹配。我想我只是希望有一个比四个 DIV 和 javascript 滚动同步更简单的解决方案。不过谢谢，+1！

是的，无论您以哪种方式切片，这都是一个挑战。您可能想查看 EXT.JS 面板：sencha.com

感谢您的 +！我收藏了这个问题以密切关注它。如果您愿意，我很想听到更多关于最终如何实施它以及实施的好/坏/丑陋的信息。 :) 也许在这里更新一些 cmets，或者如果你保留一个博客，这将是一个非常好的条目。干杯！

@mikemann，既然你问了，我想我会让你知道我们最终改变了小部件。它现在弹出一个灯箱，占据更多的屏幕，这样我们就有更多的屏幕空间。我不再需要冻结窗格功能，但我仍想保持打开状态，以便我们查看其他人的反馈。

@Alex - 感谢您的跟进。看看接下来会有什么样的反馈会很有趣。如果我感到雄心勃勃（或者实际上最终不得不实施这个），我可能会在这个问题上投入大量资金，以提高回应。 :)

【参考方案2】：

这是tbody 可以在固定大小的表格中解决的问题吗？看来你可以把overflow:auto放在tbody上。

【讨论】：

不，这只会使主要部分滚动，而不是应该滚动的两侧部分。而且你仍然有固定宽度和高度的问题。