jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析
这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件，使用起来灰常的简便，而且效果也是看着不错的。不过毕竟不是量身定做的，所以有的地方在自己的项目中还是要进行一点点小改动，因为实在是太喜欢这个插件了，所以第一次进到里面，看看原作者的思路和写法，然后才能知道如何去改成适合自己项目。
对于js我完全是一个非常业余的选手，下面根据自己的现状对这个插件做了分析，反正自己是搞明白怎么回事了，有分析不对的，还请高手指教。
/*!
*Thisplug-inisdevelopedforASP.NetGridViewcontroltomaketheGridViewscrollablewithFixedheaders.
*/
(function($){
$.fn.Scrollable=function(options){//1、定义一个jQuery实例方法，也是我们调用这个插件的入口
vardefaults={
ScrollHeight:300,
Width:0
};
varoptions=$.extend(defaults,options);//2、扩展集合，如果外部没有传入ScrollHeight的值，就默认使用300这个值，如果传入，就用传入的ScrollHeight值
returnthis.each(function(){
vargrid=$(this).get(0);//3、获取当前gridview控件的对象
vargridWidth=grid.offsetWidth;//4、获取gridview的宽度
varheaderCellWidths=newArray();
for(vari=0;i<grid.getElementsByTagName("TH").length;i++){
headerCellWidths[i]=grid.getElementsByTagName("TH")[i].offsetWidth;
}//5、创建了一个存储表头各个标题列的宽度的数组
grid.parentNode.appendChild(document.createElement("div"));//6、在文档中gridview的同级位置最后加一个div元素
varparentDiv=grid.parentNode;//7、gridview的父节点，是个div
vartable=document.createElement("table");//8、在dom中创建一个table元素
for(i=0;i<grid.attributes.length;i++){
if(grid.attributes[i].specified&&grid.attributes[i].name!="id"){
table.setAttribute(grid.attributes[i].name,grid.attributes[i].value);
}
}//9、把gridview的所有属性加到新创建的table元素上
table.style.cssText=grid.style.cssText;//10、将样式也加到table元素上
table.style.width=gridWidth+"px";//11、为table元素设置与gridview同样的宽
table.appendChild(document.createElement("tbody"));//12、为table元素加一个tbody元素
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);//13、把gridview中的第一行数据加到tbody元素中，即table里现在存着一行gridview的标题元素，同时在gridview里删除了标题这一行的元素
varcells=table.getElementsByTagName("TH");//14、取得表格标题列的集合
vargridRow=grid.getElementsByTagName("TR")[0];//15、gridview中第一行数据列的集合
for(vari=0;i<cells.length;i++){
varwidth;
if(headerCellWidths[i]>gridRow.getElementsByTagName("TD")[i].offsetWidth){//16、如果标题格的宽度大于数据列的宽度
width=headerCellWidths[i];
}
else{//17、如果标题格的宽度小于数据列的宽度
width=gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width=parseInt(width-3)+"px";
gridRow.getElementsByTagName("TD")[i].style.width=parseInt(width-3)+"px";//18、将每个标题列和数据列的宽度均调整为取其中更宽的一个，-3是出于对表格的样式进行微调考虑，不是必须
}
parentDiv.removeChild(grid);//19、删除gridview控件（注意只是从文档流中删除，实际还在内存当中，注意27条），现在的情况是table里只有一个表头
vardummyHeader=document.createElement("div");//20、在文档中再创建一个div元素
dummyHeader.appendChild(table);//21、把表头table加入其中
parentDiv.appendChild(dummyHeader);//22、把这个div插入到原来gridview的位置里
if(options.Width>0){//23、如果我们最初传入了一个想要的表格宽度值，就将gridWidth赋上这个值
gridWidth=options.Width;
}
varscrollableDiv=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方法是转移元素进行插入，而不是复制元素进行插入，但是通过查这个方法并没有明确说明是我想的那么回事。我就有些懵了。
这个插件的调用方法如下，感兴趣的朋友可以使用试试，感觉真的非常好。
<scripttype="text/javascript"src="../Scripts/PlugIn/ScrollableGridPlugin.js"></script>
<scripttype="text/javascript">
jQuery(document).ready(function(){
jQuery("#<%=gv_bugList.ClientID%>").Scrollable({
ScrollHeight:400,
width:500
});
})
</script>