zoukankan      html  css  js  c++  java
  • 发布锁定表头的一个思路

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

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

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

    放置表的网页里的东东:

    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了。
  • 相关阅读:
    Python数据结构之字符串
    Python中的logging模块
    Python资源大全中文版
    test
    Python数据结构之元组
    Python之StringIO和BytesIO
    Python标准库之pathlib
    Ubuntu下安装pyenv管理多版本python
    生成器 Generator
    CIDR网段格式
  • 原文地址:https://www.cnblogs.com/huqingyu/p/649868.html
Copyright © 2011-2022 走看看