A step-by-step resolution of the use of scrollablegridplugin.js (fixed-header) Plug-ins in jquery _jquery

This scrollablegridplugin.js is found from the Internet with a fixed table head effect of Plug-ins, the use of gray often simple, and the effect is also looking good. However, after all, is not tailor-made, so some places in their own projects or to make a little bit of change, because it is too like this plugin, so the first time into the inside, look at the original author's thinking and writing, and then know how to change to fit their own projects.

For JS I am a very amateur player, the following according to their own status of the plug-in to do the analysis, anyway, they are to understand what is going on, there is no analysis, but also please master advice.

/*!
* This plug-in was developed for ASP.net GridView control to make the GridView scrollable with Fixed headers. */function ($) {$.fn. scrollable = function (options) {//1, define a jquery instance method, also we call this plug-in's entry var defaults = {scrollheight:300, Widt
    H:0}; var options = $.extend (defaults, options); 2, the extension of the collection, if there is no external scrollheight value, the default use of the value of 300, if passed in, the ScrollHeight value passed in the Return This.each (function () {var Grid = $ ( This). Get (0);//3, gets the object var gridwidth = Grid.offsetwidth;//4 of the current GridView control, gets the width of the gridview var headercellwidths = n
      EW Array (); for (var i = 0; i < grid.getelementsbytagname ("TH"). Length; i++) {Headercellwidths[i] = Grid.getelementsbytagn
      Ame ("TH") [I].offsetwidth; }//5, creates an array Grid.parentNode.appendChild (document.createelement ("div") that stores the width of each header column of the header;//6, The same sibling position of the GridView in the document finally adds a DIV element var parentdiv = GRID.PARENTNODE;//7, the GridView parent node, is a div var table = document.creat Eelement ("table");//8, create a TABLE element F in the DOMor (i = 0; i < grid.attributes.length i++) {if (grid.attributes[i].specified && grid.attributes[i].na
        Me!= "id") {table.setattribute (grid.attributes[i].name, Grid.attributes[i].value); }//9, add all the attributes of the GridView to the newly created TABLE element table.style.cssText = GRID.STYLE.CSSTEXT;//10, and add the style to the table element TABLE.S Tyle.width = gridwidth + "px";//11, setting the same width table.appendchild (document.createelement ("Tbody") as the GridView) for the table element;//12, Add a TBODY element to the Table element Table.getelementsbytagname ("tbody") [0].appendchild (Grid.getelementsbytagname ("TR") [0]);//13, The first row of data in the GridView is added to the TBODY element, which now has a row of GridView header elements in the table, while the element var cells is deleted in the GridView by the title line. Table.getelementsbytagname ("TH");//14, get the collection of table header columns var gridrow = grid.getelementsbytagname ("TR") [0];//15, first in the GridView
        The collection for row data columns for (var i = 0; i < cells.length; i++) {var width;
          if (Headercellwidths[i] > Gridrow.getelementsbytagname ("TD") [I].offsetwidth) {//16, if the width of the title lattice is greater than the width of the data columnwidth = headercellwidths[i];
        else {//17, if the width of the title lattice is less than the width of the data column = Gridrow.getelementsbytagname ("TD") [I].offsetwidth;
        } cells[i].style.width = parseint (width-3) + "px"; Gridrow.getelementsbytagname ("TD") [I].style.width = parseint (width-3) + "px";//18, adjust the width of each header column and data column to a wider one,- 3 is to fine-tune the style of the table, not necessarily} parentdiv.removechild (grid),//19, delete the GridView control (note only deleted from the document flow, actually in memory, note 27), now the case is the table Only one header var Dummyheader = document.createelement ("div");//20, create a DIV element dummyheader.appendchild (table) in the document;//2 1. Add the table Header table to the Parentdiv.appendchild (Dummyheader);//22, insert the div into the original GridView position if (options). Width > 0) {//23, if we first pass in a desired table width value, we will assign gridwidth this value gridwidth = options.
      Width; var scrollablediv = document.createelement ("div");//24, then create a div gridwidth = parseint (gridwidth) + 17;//25, in the original
      Based on +17 is because this is a table with a slider bar, when the slider appears, the width of a bar on the width, in order to keep the data column consistent with the title column, to the width of the value, 17 is not necessary, this can be tested.ScrollableDiv.style.cssText = "Overflow:auto;height:" + options. ScrollHeight + "Px;width:" + gridwidth + "px";//26, add a style to a div with a scrollbar, and the height is the scroll bar we want it to be at how long it is to be Scrollablediv.appendchil D (Grid),//27, the GridView (currently only exists data columns) added to the div with a scroll bar, where the grid is removed from memory parentdiv.appendchild (SCROLLABLEDIV);//28,
  Add a div with a scroll bar to the bottom of the table});
}; }) (JQuery);

The only way to figure out what to do is to understand what's going on inside the plugin.

In fact, there is a place I still do not understand, Baidu after also failed to understand, hope to understand friends can tell, is 13 and 15 of these two places are used Grid.getelementsbytagname ("TR") [0]); On the surface, it should be the same TR, right? But when I tracked through the browser, I found that 13 of the calls, get the first TR of grid, that is, the title of th column tr,15 is also the first TR in grid, but contains the TD column of the first data column tr.

It's weird. After 13, the number of TR in the grid is less than 1, which means that the TR with th column is less. I thought it was the AppendChild method is to transfer elements to insert, rather than copy elements to insert, but by looking at this method does not clearly indicate that I think so. I'm just a little bit ignorant.

The method of invoking this plugin is as follows, interested friend can use to try, feel really very good.

  <script type= "Text/javascript" src= ". /scripts/plugin/scrollablegridplugin.js "></script>
  <script type=" Text/javascript ">
    jquery (document). Ready (function () {
      jQuery ("#<%=gv_buglist.clientid%>"). Scrollable ({
        scrollheight:400,
        width:500
      });
  </script>