这个scrollablegridplugin.js是从网上找到的一个具有固定表头效果的插件，使用起来灰常的简便，而且效果也是看着不错的。不过毕竟不是量身定做的，所以有的地方在自己的项目中还是要进行一点点小改动，因为实在是太喜欢这个插件了，所以第一次进到里面，看看原作者的思路和写法，然后才能知道如何去改成适合自己项目。
对于js我完全是一个非常业余的选手，下面根据自己的现状对这个插件做了分析，反正自己是搞明白怎么回事了，有分析不对的，还请高手指教。
/*!* this plug-in is developed for asp.net gridview control to make the gridview scrollable with fixed headers.*/(function ($) { $.fn.scrollable = function (options) {//1、定义一个jquery实例方法，也是我们调用这个插件的入口 var defaults = { scrollheight: 300, width: 0 }; var options = $.extend(defaults, options); //2、扩展集合，如果外部没有传入scrollheight的值，就默认使用300这个值，如果传入，就用传入的scrollheight值 return this.each(function () { var grid = $(this).get(0);//3、获取当前gridview控件的对象 var gridwidth = grid.offsetwidth;//4、获取gridview的宽度 var headercellwidths = new array(); for (var i = 0; i < grid.getelementsbytagname(th).length; i++) { headercellwidths[i] = grid.getelementsbytagname(th)[i].offsetwidth; }//5、创建了一个存储表头各个标题列的宽度的数组 grid.parentnode.appendchild(document.createelement(div));//6、在文档中gridview的同级位置最后加一个div元素 var parentdiv = grid.parentnode;//7、gridview的父节点，是个div var table = document.createelement(table);//8、在dom中创建一个table元素 for (i = 0; i 0) {//23、如果我们最初传入了一个想要的表格宽度值，就将gridwidth赋上这个值 gridwidth = options.width; } var scrollablediv = document.createelement(div);//24、再创建一个div gridwidth = parseint(gridwidth) + 17;//25、在原基础上+17是因为这是一个具有滑动条的table，当出现滑动条的时候，会在宽度上多出一个条的宽度，为了使数据列与标题列保持一致，要把这个宽度算进行，17这个值也不是必须，这个可以试验着来。 scrollablediv.style.csstext = overflow:auto;height: + options.scrollheight + px;width: + gridwidth + px;//26、给具有滚动条的div加上样式，height就是我们想让它在多大的长度时出现滚动条 scrollablediv.appendchild(grid);//27、将gridview（目前只存在数据存在数据列）加到这个带有滚动条的div中，这里是从内存中将grid取出 parentdiv.appendchild(scrollablediv);//28、将带有滚动条的div加到table的下面 }); };})(jquery);
只有弄明白插件内部是怎么回事，才能知道如何去修改。
其实这里有个地方我还是不太明白，baidu之后也没能弄明白，希望明白的朋友能告诉一下，就是13和15这两个地方都用了grid.getelementsbytagname(tr)[0]);这条语句，从表面上看应该是得到的同一个tr吧？但是我通过浏览器去跟踪的时候，发现13里调用的，得到的是grid的第一个tr，就是包含th列的标题tr，15里的也是grid里的第一个tr，但是包含的是td列的第一条数据列tr。
怪就怪在执行完13后，grid里tr数少了1，就是少了包含th列的tr。我以为是appendchild方法是转移元素进行插入，而不是复制元素进行插入，但是通过查这个方法并没有明确说明是我想的那么回事。我就有些懵了。
这个插件的调用方法如下，感兴趣的朋友可以使用试试，感觉真的非常好。