微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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

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

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

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

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

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

解决方法

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

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

原文地址:https://www.jb51.cc/csharp/95210.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐