行列锁定.doc

行列锁定 功能介绍： 可以实现锁定表格的行和列的功能，效果和Excel里的冻结窗格类似，当然没有Excel那么强大了，只是类似。 问题： 当一个table太大而导致在屏幕里显示不下的时候，IE会出现滚动条，但是这时候就不好看了，对用户的操作也不是很方便。于是我们就想给他加一个限制，在制定的范围内滚动。 如何实现呢？网上也有不少实现方法了，效果如何就不发表意见了，这里主要是想说一下我的思路。 思路： 1、其实思路很简单，div有一个“功能”，给他的style 加上 "CLEAR： none； OVERFLOW： auto； WIDTH： 100px； HEIGHT：100px" 后，div就会出现滚动条（当然要在div里的内容超出div设置的时候）。这样div里的table 就可滚动了。但是行和列也以一起跟着动了起来。 2、行和列如何“锁定”呢？这里我用了一个笨招，用三个div来分别放置行和列，以及行列交叉的地方。这样看起来就像是别锁定住了。 3、当然行和列并不是不动就可以了，也要根据div的滚动条的滚动作出变化（移动）才可以，这里就要使用js来帮忙了。 优点： 1、侵入性小。只需要在。aspx页面里加几个div，引用一个。js文件就可以了。其他的文件里的代码都不用修改。 2、适用范围比较广：针对生成的 table 标签，而不针对服务器控件，所以DataGrd、GridView、DataList等都可以使用，只要输出的是 table 形式的html代码就可以。 3、可以同时锁定行和列，行数和列数可以自定义。“锁定”效果好，不会出现“跳动”的现象。 缺点： 1、占用客户端的资源比较大，行数多的时候会有一点点慢。 2、不支持ff. js的能力还是不够强，目前只能这样了，但这不是最终的结果，还是要更新升级的。发出来也是想请各路高手指点一二。 说了这么多了，可能大家还是没有看明白，不好意思，表达能力比较差。发代码看看吧，呵呵。 。aspx文件里面需要加的代码： div onscroll="myScroll（this）" id="dMain" style="CLEAR： none； OVERFLOW： auto； WIDTH： 500px； HEIGHT： 150px" 你的控件控件 /div div id="dTop" style="CLEAR： none； LEFT： 10px； OVERFLOW： hidden； WIDTH： 0px； POSITION： absolute； TOP： -10px； HEIGHT： 0px； BACKGROUND-COLOR： #ffffff"放置行/div div id="dLeft" style="CLEAR： none； LEFT： 10px； OVERFLOW： hidden； WIDTH： 0px； POSITION： absolute； TOP： 10px； HEIGHT： 0px； BACKGROUND-COLOR： #ffffff"放置列/div div id="dMid" style="CLEAR： none； LEFT： 10px； OVERFLOW： hidden； WIDTH： 0px； POSITION： absolute； TOP： 10px； HEIGHT： 0px； BACKGROUND-COLOR： #ffffff"/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.w