如何复制“；冻结窗格”；HTML表上的功能

本文关键字：HTML 功能 冻结 何复制 复制 | 更新日期: 2023-09-27 18:06:01

我在为我的工作开发的ASP.NET项目中有一个小部件。它必须是300像素宽，不能再宽了。不幸的是，对于这样一个小部件来说，他们想要的是相当复杂的。以下是我现在拥有的：

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

正如您所看到的，这是一个jQueryUI手风琴控件。当每个手风琴式窗格展开时，将进行ajax调用以异步加载其内容。现在，它吐出一个包含所需数据的HTML表。该表位于样式为overflow: auto;的DIV中，因此我们可以在底部和右侧获得滚动条。

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

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

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

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

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

如何复制“；冻结窗格”；HTML表上的功能

我构建了一些类似但不那么复杂的东西：我希望在数据行垂直滚动时冻结表的第一行(标题(。我将其实现为两个不同的表，每个表都有固定宽度的单元格，每个单元格都有自己的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以相同的方式滚动。

对不起，这是一个模糊/抽象的回答。实现这样的东西所需要的时间比我从主要工作中轻松窃取的时间还要多。但这是我脑子里一直在想的事情，所以我想和你分享一下。我希望它能让你至少更接近一个解决方案。干杯

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

相关文章：