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

我正在为我的工作开发的ASP.NET项目中的一个小部件.它必须是300像素宽,不能更宽.不幸的是,对于这样一个小的小部件,他们想要的是相当复杂的.这是我现在所做的：

你可以看到,这是一个jQuery UI手风琴控件.随着每个手风琴窗格扩展ajax调用都是异步加载其内容.现在它会吐出一个包含所需数据的HTML表.桌子在DIV中,风格溢出：auto;这样我们就可以在底部和右边找到滚动条.

我的问题是我想要一些非常自定义的功能(如excel中的冻结窗格功能).当左右滚动时,我希望包括标题在内的所有行都向左和向右滚动,除了最左边的列,“产品名称”.喜欢这个：

当上下滚动时,我希望所有列(包括左列)都可以向上和向下滚动,除了标题行.喜欢这个：

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

我构建了一些类似的东西,但不太复杂：我希望表格(标题)的第一行在数据行垂直滚动时被冻结.我将其实现为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以相同的方式滚动.

对不起,这是一个模糊/抽象的回应.实施类似这样的事情需要更多的时间,比我可以舒服地偷走我的主要工作.但是,这是我脑海里的一切,所以我想和你分享一下.我希望它能让您至少更接近一个解决方案.干杯!

相关文章