知识大全发布一个锁定行列的一种方法

Posted 2022-07-17 知

篇首语：“善与恶皆为上帝的成见。”蛇如是说。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全发布一个锁定行列的一种方法相关的知识，希望对你有一定的参考价值。

　　功能介绍

　　可以实现锁定表格的行和列的功能效果和Excel里的冻结窗格类似当然没有Excel那么强大了只是类似

　　问题

　　当一个table太大而导致在屏幕里显示不下的时候 IE会出现滚动条但是这时候就不好看了对用户的操作也不是很方便于是我们就想给他加一个限制在制定的范围内滚动

　　如何实现呢？网上也有不少实现方法了效果如何就不发表意见了这里主要是想说一下我的思路

　　思路

　　其实思路很简单 div有一个功能给他的style 加上 CLEAR none OVERFLOW auto WIDTH px HEIGHT px 后 div就会出现滚动条（当然要在div里的内容超出div设置的时候）这样div里的table 就可滚动了但是行和列也以一起跟着动了起来

　　行和列如何锁定呢？这里我用了一个笨招用三个div来分别放置行和列以及行列交叉的地方这样看起来就像是别锁定住了

　　当然行和列并不是不动就可以了也要根据div的滚动条的滚动作出变化（移动）才可以这里就要使用js来帮忙了

　　优点

　　侵入性小只需要在 aspx页面里加几个div 引用一个 js文件就可以了其他的文件里的代码都不用修改

　　适用范围比较广针对生成的 <table> 标签而不针对服务器控件所以DataGrd GridView DataList等都可以使用只要输出的是 table 形式的代码就可以

　　可以同时锁定行和列行数和列数可以自定义锁定效果好不会出现跳动的现象

　　缺点

　　占用客户端的资源比较大行数多的时候会有一点点慢

　　不支持ff

　　js的能力还是不够强目前只能这样了但这不是最终的结果还是要更新升级的发出来也是想请各路高手指点一二

　　说了这么多了可能大家还是没有看明白不好意思表达能力比较差发代码看看吧呵呵

　　 aspx文件里面需要加的代码

　　你的控件控件

　　</div>

　　js 文件里的代码

　　function myLoad（）

　　if （document getElementById（ dMain ））

　　divInit（）

　　function myResize（）

　　if （document getElementById（ dMain ））

　　divInit（）

　　function divInit（）

　　var dMain = document getElementById（ dMain ） //主Div

　　var dTop = document getElementById（ dTop ） //锁定行的Div

　　var dLeft = document getElementById（ dLeft ） //锁定列的Div

　　var dMid = document getElementById（ dMid ） //左上角的Div

　　var windowWidth = document body scrollWidth

　　var windowHeight = document body clientHeight

　　//alert（windowWidth）

　　dMain style background= #ffffff

　　//alert（windowHeight）

　　dMain style width = windowWidth

　　//修正

　　var sch = document getElementById（ div_Search ）

　　//alert（sch scrollHeight）

　　if （sch style display == ）

　　dMain style height = windowHeight sch scrollHeight

　　else

　　dMain style height = windowHeight

　　//dMain style display = none

　　//寻找Top 和 Left

　　var tt = dMain // 寻找左上角的坐标代码来自梅花雪的日期控件

　　var th = tt

　　var ttop = tt offsetTop

　　var thei = tt clientHeight

　　var tleft = tt offsetLeft

　　var ttyp = tt type

　　while （tt = tt offsetParent）ttop+=tt offsetTop tleft+=tt offsetLeft

　　var myTop = （ttyp== image ）？ ttop+thei ttop+thei+ //左上角的坐标

　　var myLeft = tleft //左上角的坐标

　　//===================================寻找完毕===============

　　hh = dMain style height //修正

　　hh = hh replace（ px ）

　　myTop = myTop hh +

　　var dg = document getElementById（ DG ） //显示数据的表格

　　var RowsCount = //锁定行数

　　var LineCount = //锁定列数

　　//锁定行的高度

　　var RowsHeight = dg rows[RowsCount] cells[ ] offsetTop dg rows[ ] cells[ ] offsetTop +

　　//锁定列的宽度

　　var LineWidth = dg rows[ ] cells[LineCount] offsetLeft dg rows[ ] cells[ ] offsetLeft +

　　//锁定列的高度

　　var LineHeight = dMain style height

　　LineHeight = LineHeight replace（ px ）

　　//锁定行的宽度

　　var RowsWidth = dMain style width

　　RowsWidth = RowsWidth replace（ px ）

　　//hh = parseint（hh）

　　//赋值

　　divResize（dMain dTop dLeft dMid）

　　if （RowsHeight < ）

　　RowsHeight =

　　if （LineWidth < ）

　　LineWidth =

　　dTop style width = RowsWidth

　　dTop style height = RowsHeight

　　dLeft style width = LineWidth

　　dLeft style height = LineHeight

　　dMid style width = LineWidth

　　dMid style height = RowsHeight

　　//设置左上角的位置

　　dTop style top = myTop

　　dTop style left = myLeft

　　dLeft style top = myTop

　　dLeft style left = myLeft

　　dMid style top = myTop

　　dMid style left = myLeft

　　function divResize（dMain dTop dLeft dMid）

　　dTop innerHTML = dMain innerHTML

　　dMid innerHTML = dMain innerHTML

　　dLeft innerHTML = dMain innerHTML

　　dLeft = dMain

　　function divResize （dMain dLeft）

　　dLeft innerHTML = dMain innerHTML

　　function myScroll（me）

　　var dTop = document getElementById（ dTop ）

　　var dLeft = document getElementById（ dLeft ）

　　var dMid = document getElementById（ dMid ） //左上角的Div

　　dTop scrollLeft = me scrollLeft

　　dLeft scrollTop = me scrollTop

　　//dMid scrollLeft = me scrollLeft

　　//dMid scrollTop = me scrollTop

cha138/Article/program/net/201311/12481

知识大全 发布一个锁定行列的一种方法

知识大全发布一个锁定行列的一种方法