/*!
* This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers.
*/
(function ($) {
  $.fn.Scrollable = function (options) {//1、定義一個(gè)jQuery實(shí)例方法，也是我們調(diào)用這個(gè)插件的入口
    var defaults = {
      ScrollHeight: 300,
      Width: 0
    };
    var options = $.extend(defaults, options); //2、擴(kuò)展集合，如果外部沒有傳入ScrollHeight的值，就默認(rèn)使用300這個(gè)值，如果傳入，就用傳入的ScrollHeight值
    return this.each(function () {
      var grid = $(this).get(0);//3、獲取當(dāng)前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、創(chuàng)建了一個(gè)存儲(chǔ)表頭各個(gè)標(biāo)題列的寬度的數(shù)組
      grid.parentNode.appendChild(document.createElement("div"));//6、在文檔中g(shù)ridview的同級(jí)位置最后加一個(gè)div元素
      var parentDiv = grid.parentNode;//7、gridview的父節(jié)點(diǎn)，是個(gè)div

      var table = document.createElement("table");//8、在dom中創(chuàng)建一個(gè)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的所有屬性加到新創(chuàng)建的table元素上
      table.style.cssText = grid.style.cssText;//10、將樣式也加到table元素上
      table.style.width = gridWidth + "px";//11、為table元素設(shè)置與gridview同樣的寬
      table.appendChild(document.createElement("tbody"));//12、為table元素加一個(gè)tbody元素
      table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);//13、把gridview中的第一行數(shù)據(jù)加到tbody元素中，即table里現(xiàn)在存著一行g(shù)ridview的標(biāo)題元素，同時(shí)在gridview里刪除了標(biāo)題這一行的元素
      var cells = table.getElementsByTagName("TH");//14、取得表格標(biāo)題列的集合

      var gridRow = grid.getElementsByTagName("TR")[0];//15、gridview中第一行數(shù)據(jù)列的集合
      for (var i = 0; i < cells.length; i++) {
        var width;
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {//16、如果標(biāo)題格的寬度大于數(shù)據(jù)列的寬度
          width = headerCellWidths[i];
        }
        else {//17、如果標(biāo)題格的寬度小于數(shù)據(jù)列的寬度
          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、將每個(gè)標(biāo)題列和數(shù)據(jù)列的寬度均調(diào)整為取其中更寬的一個(gè)，-3是出于對表格的樣式進(jìn)行微調(diào)考慮，不是必須
      }
      parentDiv.removeChild(grid);//19、刪除gridview控件（注意只是從文檔流中刪除，實(shí)際還在內(nèi)存當(dāng)中，注意27條），現(xiàn)在的情況是table里只有一個(gè)表頭

      var dummyHeader = document.createElement("div");//20、在文檔中再創(chuàng)建一個(gè)div元素
      dummyHeader.appendChild(table);//21、把表頭table加入其中
      parentDiv.appendChild(dummyHeader);//22、把這個(gè)div插入到原來gridview的位置里
      if (options.Width > 0) {//23、如果我們最初傳入了一個(gè)想要的表格寬度值，就將gridWidth賦上這個(gè)值
        gridWidth = options.Width;
      }
      var scrollableDiv = document.createElement("div");//24、再創(chuàng)建一個(gè)div
      gridWidth = parseInt(gridWidth) + 17;//25、在原基礎(chǔ)上+17是因?yàn)檫@是一個(gè)具有滑動(dòng)條的table，當(dāng)出現(xiàn)滑動(dòng)條的時(shí)候，會(huì)在寬度上多出一個(gè)條的寬度，為了使數(shù)據(jù)列與標(biāo)題列保持一致，要把這個(gè)寬度算進(jìn)行，17這個(gè)值也不是必須，這個(gè)可以試驗(yàn)著來。
      scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";//26、給具有滾動(dòng)條的div加上樣式，height就是我們想讓它在多大的長度時(shí)出現(xiàn)滾動(dòng)條
      scrollableDiv.appendChild(grid);//27、將gridview（目前只存在數(shù)據(jù)存在數(shù)據(jù)列）加到這個(gè)帶有滾動(dòng)條的div中，這里是從內(nèi)存中將grid取出
      parentDiv.appendChild(scrollableDiv);//28、將帶有滾動(dòng)條的div加到table的下面
    });
  };
})(jQuery);

  <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>