jQuery 关于ScrollableGridPlugin.js（固定表头）插件的逐步解析

 1 /*! 2 * This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers. 3 */ 4 (function ($) { 5 ????$.fn.Scrollable = function (options) {//1、定义一个jQuery实例方法，也是我们调用这个插件的入口 6 ????????var defaults = { 7 ????????????ScrollHeight: 300, 8 ????????????Width: 0 9 ????????};10 ????????var options = $.extend(defaults, options); //2、扩展集合，如果外部没有传入ScrollHeight的值，就默认使用300这个值，如果传入，就用传入的ScrollHeight值11 ????????return this.each(function () {12 ????????????var grid = $(this).get(0); //3、获取当前gridview控件的对象13 ????????????var gridWidth = grid.offsetWidth; //4、获取gridview的宽度14 ????????????var headerCellWidths = new Array();15 ????????????for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {16 ????????????????headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;17 ????????????} //5、创建了一个存储表头各个标题列的宽度的数组18 ????????????grid.parentNode.appendChild(document.createElement("div")); //6、在文档中gridview的同级位置最后加一个div元素19 ????????????var parentDiv = grid.parentNode; //7、gridview的父节点，是个div20 21 ????????????var table = document.createElement("table"); //8、在dom中创建一个table元素22 ????????????for (i = 0; i < grid.attributes.length; i++) {23 ????????????????if (grid.attributes[i].specified && grid.attributes[i].name != "id") {24 ????????????????????table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);25 ????????????????}26 ????????????} //9、把gridview的所有属性加到新创建的table元素上27 ????????????table.style.cssText = grid.style.cssText; //10、将样式也加到table元素上28 ????????????table.style.width = gridWidth + "px"; //11、为table元素设置与gridview同样的宽29 ????????????table.appendChild(document.createElement("tbody")); //12、为table元素加一个tbody元素30 ????????????table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); //13、把gridview中的第一行数据加到tbody元素中，即table里现在存着一行gridview的标题元素，同时在gridview里删除了标题这一行的元素31 ????????????var cells = table.getElementsByTagName("TH"); //14、取得表格标题列的集合32 33 ????????????var gridRow = grid.getElementsByTagName("TR")[0]; //15、gridview中第一行数据列的集合34 ????????????for (var i = 0; i < cells.length; i++) {35 ????????????????var width;36 ????????????????if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {//16、如果标题格的宽度大于数据列的宽度37 ????????????????????width = headerCellWidths[i];38 ????????????????}39 ????????????????else {//17、如果标题格的宽度小于数据列的宽度40 ????????????????????width = gridRow.getElementsByTagName("TD")[i].offsetWidth;41 ????????????????}42 ????????????????cells[i].style.width = parseInt(width - 3) + "px";43 ????????????????gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; //18、将每个标题列和数据列的宽度均调整为取其中更宽的一个，-3是出于对表格的样式进行微调考虑，不是必须44 ????????????}45 ????????????parentDiv.removeChild(grid); //19、删除gridview控件（注意只是从文档流中删除，实际还在内存当中，注意27条），现在的情况是table里只有一个表头46 47 ????????????var dummyHeader = document.createElement("div"); //20、在文档中再创建一个div元素48 ????????????dummyHeader.appendChild(table); //21、把表头table加入其中49 ????????????parentDiv.appendChild(dummyHeader); //22、把这个div插入到原来gridview的位置里50 ????????????if (options.Width > 0) {//23、如果我们最初传入了一个想要的表格宽度值，就将gridWidth赋上这个值51 ????????????????gridWidth = options.Width;52 ????????????}53 ????????????var scrollableDiv = document.createElement("div"); //24、再创建一个div54 ????????????gridWidth = parseInt(gridWidth) + 17; //25、在原基础上+17是因为这是一个具有滑动条的table，当出现滑动条的时候，会在宽度上多出一个条的宽度，为了使数据列与标题列保持一致，要把这个宽度算进行，17这个值也不是必须，这个可以试验着来。55 ????????????scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px"; //26、给具有滚动条的div加上样式，height就是我们想让它在多大的长度时出现滚动条56 ????????????scrollableDiv.appendChild(grid); //27、将gridview（目前只存在数据存在数据列）加到这个带有滚动条的div中，这里是从内存中将grid取出57 ????????????parentDiv.appendChild(scrollableDiv); //28、将带有滚动条的div加到table的下面58 ????????});59 ????};60 })(jQuery);

1 ?<script type="text/javascript" src="../Scripts/PlugIn/ScrollableGridPlugin.js"></script>2 ?<script type="text/javascript">3 ?????jQuery(document).ready(function () {4 ?????jQuery("#<%=gv_bugList.ClientID %>").Scrollable({5 ?????ScrollHeight: 400,6 ??????????width: 5007 ??????????});8 ?????})9 </script>