发布一个锁定行列的一种方法

　　功能介绍：

　　可以实现锁定表格的行和列的功能，效果和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.width = windowWidth - 12；

　　//修正

　　var sch = document.getElementById（"div_Search"）；

　　//alert（sch.scrollHeight）；

　　if （sch.style.display == ""）

　　{

　　dMain.style.height = windowHeight - 100 - sch.scrollHeight；

　　}

　　else

　　{

　　dMain.style.height = windowHeight - 120；

　　}

　　//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+6； //左上角的坐标

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

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

　　hh = dMain.style.height； //修正

　　hh = hh.replace（"px"，""）；

　　myTop = myTop - hh + 12；

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

　　var RowsCount = "1"； //锁定行数

　　var LineCount = "1"； //锁定列数

　　//锁定行的高度

　　var RowsHeight = dg.rows[RowsCount].cells[0].offsetTop - dg.rows[0].cells[0].offsetTop + 2

　　//锁定列的宽度

　　var LineWidth = dg.rows[0].cells[LineCount].offsetLeft - dg.rows[0].cells[0].offsetLeft + 2

　　//锁定列的高度

　　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 <25）

　　RowsHeight = 25；

　　if （LineWidth <20）

　　LineWidth = 20；

　　dTop.style.width = RowsWidth - 16；

　　dTop.style.height = RowsHeight；

　　dLeft.style.width = LineWidth；

　　dLeft.style.height = LineHeight - 16；

　　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 divResize2（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；

　　}