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

Question

我在ASP.NET项目中有一个小部件,我正在为我的工作开发.它必须是300像素宽,不能更宽.不幸的是,对于这样一个小小部件,他们想要的东西已经证明相当复杂.这就是我现在所拥有的:

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

如您所见,这是一个jQuery UI手风琴控件.当每个折叠窗格展开时,会调用ajax来异步加载其内容.现在它会吐出一个包含所需数据的HTML表.该表在DIV中具有样式,overflow: auto;以便我们在底部和右侧获得滚动条.

我的问题是我想要一些漂亮的自定义功能(比如excel中的冻结窗格功能).当向左和向右滚动时,我希望所有行(包括标题)向左和向右滚动,除了最左边的列,"产品名称".像这样:

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

向上和向下滚动时,我希望所有列(包括左列)向上和向下滚动除标题行外.像这样:

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

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

Answer 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 以相同的方式滚动。

抱歉，这是一个如此模糊/抽象的回答。实施这样的事情的实质内容将花费更多的时间，我无法轻松地从我的主要工作中偷走。但这件事一直在我的脑海里盘旋，所以我想和你分享。我希望它至少能让您更接近解决方案。干杯!