网上也有很多锁定行列的方法，一个是使用css，另一个就是专门的控件附带有锁定的功能。css的大多数锁定行，而不能锁定列。好像看过园子里的司徒正美，写过一个用css锁定行列的，当时css比较烂看不懂，也没有保存那个网址（很后悔），现在想要找却又找不到了。
另一个就是第三方控件，这种控件很强大，锁定行列只是附带的一个小功能。但是有一个比较明显的缺点，必须使用它的控件，我想锁定GridView，那就不行了。除非你能把他的锁定方法给研究出来。
最近我在学jQuery，我觉得找个需求来学习，进步会比较快，于是就选择了锁定行列的这个需求。
目的：
1、针对<table>来锁定，只要是table标签的形式都能锁定。支持GridView等控件。
2、可以锁定行、锁定列、同时锁定行列、锁定多行多列。
3、使用简单，无需修改后台代码（后置代码）。只需要在前台稍微做点调整即可。
4、效率不能太差，最好支持多种浏览器。
目的确定下来，然后就要想办法实现了。其实以前也做过两个版本，因为以前js很烂，也不知道有jQuery这样的东东，于是就想了一个笨法。先 做一个div（divMain），把要锁定的table放进去，再做三个div，然后把要锁定的table拷贝到三个div里面，然后调整div的宽度、 高度和位置，分别放在要锁定的行、列和行列交叉的地方放。然后在写一个滚动事件，在divMain的滚动条滚动的事件里，同时滚动上面的div和左面的 div。这样就形成了一个锁定的效果。
这个方法的缺点很多了，但是水平很烂，也只能这样了。现在想要提高一下js水平，那么就要弄个更好一点的。把整个table都拷贝过去是不是太浪费了？能不能只拷贝要锁定的行、列？
于是呢，就要jQuery动态创建div和需要的table，然后调整他们的宽度、高度和位置，这样在滚动的时候效率就高了很多，不过也有个问 题，那就是精确获取、设置td的高度和宽度，要能够支持被撑高的td。这个问题困扰了我好久，昨天在群里得到了各位高手的帮忙，尤其是“紫風鈴”的指点， 才得以突破。
说了这么多，可能大家都烦了，说一下使用方法。
1、引用jquery-1.4.2.js
2、引用scroll-1.0.js （下载）
3、在要锁定的table外面加上一个div，并且设置id
4、调用js函数，myScroll('div_Main',1,1,'tableID')
第一个参数：要锁定的table外面的div的ID，
第二个参数：要锁定的行数（从上面数），可以是0，表示不锁定行。
第三个参数：要锁定的列数（从左面数），可以是0，表示不锁定列。
第四个参数：要锁定的table的ID。
好了搞定。有几个注意事项。
1、如果div里只有一个table，没有其他的，那么可以不传递tableID这个参数。
2、table的width不能设置百分比的形式，比如100%，这样很可能造成table被挤在div里面，没有横向的滚动。
对了，还要说一下缺点：
1、代码比较烂。初学jQuery，js的功底也很差，所以现在的1.0版本的代码只是实现了基本的功能，代码的美观、运行效率那就很差了，以后还需要继续前进。
2、td的高度和宽度还是差了一些，不过基本上可以忍受。还需要继续调整。
3、table的行数比较多时（大于100行），初始化时间会很长。初始化就是创建锁定的行、列的部分。
最后是在线演示的地址：http://demo.naturefw.com/Nonline/other/default.aspx
下一步除了修改bug外，还要实现交替色、鼠标跟随、单击、双击、选择变色等功能。
posted on
