发布一个锁定行列的一种方法。（实现Excel里的冻结窗格的功能）

功能介绍：
    可以实现锁定表格的行和列的功能，效果和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;
}

代码比较乱，最近打算简化一下代码，换一个更高效的方式。