功能介紹：

　　可以實(shí)現(xiàn)鎖定表格的行和列的功能，效果和Excel里的凍結(jié)窗格類似，當(dāng)然沒(méi)有Excel那么強(qiáng)大了，只是類似。

　　問(wèn)題：

　　當(dāng)一個(gè)table太大而導(dǎo)致在屏幕里顯示不下的時(shí)候，IE會(huì)出現(xiàn)滾動(dòng)條，但是這時(shí)候就不好看了，對(duì)用戶的操作也不是很方便。于是我們就想給他加一個(gè)限制，在制定的范圍內(nèi)滾動(dòng)。

　　如何實(shí)現(xiàn)呢?網(wǎng)上也有不少實(shí)現(xiàn)方法了，效果如何就不發(fā)表意見(jiàn)了，這里主要是想說(shuō)一下我的思路。

　　思路：

　　1、其實(shí)思路很簡(jiǎn)單，div有一個(gè)“功能”，給他的style 加上 "CLEAR： none; OVERFLOW： auto; WIDTH： 100px; HEIGHT：100px" 后，div就會(huì)出現(xiàn)滾動(dòng)條(當(dāng)然要在div里的內(nèi)容超出div設(shè)置的時(shí)候)。這樣div里的table 就可滾動(dòng)了。但是行和列也以一起跟著動(dòng)了起來(lái)。

　　2、行和列如何“鎖定”呢?這里我用了一個(gè)笨招，用三個(gè)div來(lái)分別放置行和列，以及行列交叉的地方。這樣看起來(lái)就像是別鎖定住了。

　　3、當(dāng)然行和列并不是不動(dòng)就可以了，也要根據(jù)div的滾動(dòng)條的滾動(dòng)作出變化(移動(dòng))才可以，這里就要使用js來(lái)幫忙了。

　　優(yōu)點(diǎn)：

　　1、侵入性小。只需要在。aspx頁(yè)面里加幾個(gè)div，引用一個(gè)。js文件就可以了。其他的文件里的代碼都不用修改。

　　2、適用范圍比較廣：針對(duì)生成的 標(biāo)簽，而不針對(duì)服務(wù)器控件，所以DataGrd、GridView、DataList等都可以使用，只要輸出的是 table 形式的html代碼就可以。

　　3、可以同時(shí)鎖定行和列，行數(shù)和列數(shù)可以自定義。“鎖定”效果好，不會(huì)出現(xiàn)“跳動(dòng)”的現(xiàn)象。

　　缺點(diǎn)：

　　1、占用客戶端的資源比較大，行數(shù)多的時(shí)候會(huì)有一點(diǎn)點(diǎn)慢。

　　2、不支持ff.

　　js的能力還是不夠強(qiáng)，目前只能這樣了，但這不是最終的結(jié)果，還是要更新升級(jí)的。發(fā)出來(lái)也是想請(qǐng)各路高手指點(diǎn)一二。

　　說(shuō)了這么多了，可能大家還是沒(méi)有看明白，不好意思，表達(dá)能力比較差。發(fā)代碼看看吧，呵呵。

　　。aspx文件里面需要加的代碼：

　　你的控件控件

　　放置行

　　放置列

　　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; // 尋找左上角的坐標(biāo)，代碼來(lái)自梅花雪的日期控件
　　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; //左上角的坐標(biāo)
　　var myLeft = tleft; //左上角的坐標(biāo)
　　//===================================尋找完畢===============
　　hh = dMain.style.height; //修正
　　hh = hh.replace("px"，"");
　　myTop = myTop - hh + 12;
　　var dg = document.getElementById("DG"); //顯示數(shù)據(jù)的表格
　　var RowsCount = "1"; //鎖定行數(shù)
　　var LineCount = "1"; //鎖定列數(shù)
　　//鎖定行的高度
　　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;
　　//設(shè)置左上角的位置
　　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;
　　}