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
实现此功能的最佳方式是什么?还是有办法?
解决方法
你的问题更复杂,因为你想要在两个轴上“冻结窗格”,并支持在两个轴上滚动(我有更多的房地产要使用,而不必考虑水平滚动).不过,我想知道你是否可以从那个位置开始,从那里开始工作?
定义4个div:
> NW:这个不会滚动,永远.这是您的示例中的“产品名称”单元格
> NE:这个只能水平滚动.这是您的示例中的顶部/标题行
> SW:这个只能垂直滚动.这是您示例中的左侧列
SE:这个滚动两个方向.这是您的示例中的主数据网格
使用4个DIV,您将处理4个不同的表,因此我们需要保持其单元格宽度和单元格高度同步.理想情况下,我们可以在渲染时做到这一点,如果我们可以使它们成为固定值.否则,当页面首次加载(或调整大小)时,我们可能可以编写一些客户端jquery / JS来迭代SE表中的单元格,并强制其他表的大小与之匹配.
使用4个DIV,我们还需要同步滚动:当SE在水平上滚动时,NE必须滚动到相同的位置.当SE垂直滚动时,SW必须滚动到相同的位置.我怀疑必须有一些客户端滚动事件我们可以挂钩,以检测何时SE滚动.在这些事件中,我们应该能够强制NE和/或SW以相同的方式滚动.
对不起,这是一个模糊/抽象的回应.实施类似这样的事情需要更多的时间,比我可以舒服地偷走我的主要工作.但是,这是我脑海里的一切,所以我想和你分享一下.我希望它能让您至少更接近一个解决方案.干杯!