发布锁定表头的一个思路。垂直滚动时表头不动,水平滚动时表头可以同步滚动。
在这里呢我只介绍我的思路,因为我觉得思路要比代码重要得多。当然我的想法已经实现了。
网页两个:一个是放置表的;一个是放置表头的。
放置表的网页里的东东:
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了。