功能介紹：

　　可以實現鎖定表格的行和列的功能，效果和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、適用范圍比較廣：針對生成的 標簽，而不針對服務器控件，所以DataGrd、GridView、DataList等都可以使用，只要輸出的是 table 形式的html代碼就可以。

　　3、可以同時鎖定行和列，行數和列數可以自定義。“鎖定”效果好，不會出現“跳動”的現象。

　　缺點：

　　1、占用客戶端的資源比較大，行數多的時候會有一點點慢。

　　2、不支持ff.

　　js的能力還是不夠強，目前只能這樣了，但這不是最終的結果，還是要更新升級的。發出來也是想請各路高手指點一二。

　　說了這么多了，可能大家還是沒有看明白，不好意思，表達能力比較差。發代碼看看吧，呵呵。

　　。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; // 尋找左上角的坐標，代碼來自梅花雪的日期控件
　　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;
　　}