发布锁定表头的一个思路

发布锁定表头的一个思路。垂直滚动时表头不动,水平滚动时表头可以同步滚动。

在这里呢我只介绍我的思路,因为我觉得思路要比代码重要得多。当然我的想法已经实现了。

网页两个:一个是放置表的;一个是放置表头的。

放置表的网页里的东东:

1.DataGrid (就以它为例吧)
2.div两个
3.iframe一个
4.js脚本若干 

放置表头的网页里的东东:

1.一个div

。这些是主料,其他的像css样式表了什么的,更具个人口味自行添加。


下面是主要步骤:

1.在DataGrid的外面套一个div——DGdiv, 目的是给DataGrid加滚动条。详细的做法嘛,网上已经有n多代码了,随便找一个

就行了。

2.把iframe放在另一个div里面——frmDIV,div设置成可以移动的那种,就是用“坐标”定位的那种;iframe的src就是放置

放置表头的那个网页。高度要调整到和DataGrid的表头一致,宽度也是。

3.编写js脚本,这个就复杂了一点又要分成若干步:

a.读取DataGrid的内容,其实也就是DGdiv.innerHTML,然后把他放在iframe里面的网页里面的div里面。

这时可以运行一下,初步的效果已经出来了,DataGrid有了滚动条,出现了两个表头,一个是DataGrid的,一个是iframe里面

的,垂直滚动的时候DataGrid得表头不见了,iframe的依旧......

b.写一个移动div的脚本,把frmDIV移动到DGdiv 的上面,目的是让iframe的表头盖住DataGrid的表头。

c.再写一个滚动iframe的脚本,在DGdiv滚动的事件里触发,这样就可以实现水平滚动的时候表头也可以跟着同步滚动。



结论:每一部分的代码都可以在网上找到,而且有些是很常见的方法,不知道其他人有没有想到过这种组合。:)

另外几点说明:
1.为什么要把整个DataGrid都放到iframe里面的div里?

目的就是要保证表头的宽度和DataGrid的宽度一致,如果列宽是固定的话,也可以只把表头的行放在iframe里面的div里。

2.为什么要用iframe?

一开始想用div的,但是div的滚动条无法隐藏,让他盖在DataGrid的上面也可能会有失败的情况。
所以呢就用iframe了,他的滚动条可以隐藏,而且可以绝对放在div的上面。

3.为什么iframe的外面还要再套一个div呢?

因为我用js移动iframe没有成功,所以呢只好再套一个div了。
原文地址:https://www.cnblogs.com/huqingyu/p/649868.html