1 /*!
 2 * This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers.
 3 */
 4 (function ($) {
 5     //1、定義一個jQuery例項方法，也是我們呼叫這個外掛的入口
 6     $.fn.Scrollable = function (options) {
 7         var defaults = {
 8             ScrollHeight: 300,
 9             Width: 0
 

10         };
11         //2、擴充套件集合，如果外部沒有傳入ScrollHeight的值，就預設使用300這個值，如果傳入，就用傳入的ScrollHeight值
12         var options = $.extend(defaults, options);
13         return this.each(function () {
14             //3、獲取當前gridview控制元件的物件
15             var grid = $(this).get(0);
16             //4、獲取gridview的寬度
17             var
 
 gridWidth = grid.offsetWidth;
18             var headerCellWidths = new Array();
19             //5、建立了一個儲存表頭各個標題列的寬度的陣列
20             for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
21                 headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
22             }
 
23             //6、在文件中gridview的同級位置最後加一個div元素
24             grid.parentNode.appendChild(document.createElement("div"));
25             //7、gridview的父節點，是個div
26             var parentDiv = grid.parentNode;
27 
28             //8、在dom中建立一個table元素
29             var table = document.createElement("table");
30             //9、把gridview的所有屬性加到新建立的table元素上
31             for (i = 0; i < grid.attributes.length; i++) {
32                 if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
33                     table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
34                 }
35             }
36             //10、將樣式也加到table元素上
37             table.style.cssText = grid.style.cssText;
38             //11、為table元素設定與gridview同樣的寬
39             table.style.width = gridWidth + "px";
40             //12、為table元素加一個tbody元素
41             table.appendChild(document.createElement("tbody"));
42             //13、把gridview中的第一行資料加到tbody元素中，即table裡現在存著一行gridview的標題元素，
43             //同時在gridview裡刪除了標題這一行的元素
44             table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
45             //14、取得表格標題列的集合
46             var cells = table.getElementsByTagName("TH");
47 
48             //15、gridview中第一行資料列的集合
49             var gridRow = grid.getElementsByTagName("TR")[0]; 
50             for (var i = 0; i < cells.length; i++) {
51                 var width;
52                 //16、如果標題格的寬度大於資料列的寬度
53                 if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
54                     width = headerCellWidths[i];
55                 }
56                 //17、如果標題格的寬度小於資料列的寬度
57                 else {
58                     width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
59                 }
60                 cells[i].style.width = parseInt(width - 3) + "px";
61                 //18、將每個標題列和資料列的寬度均調整為取其中更寬的一個，-3是出於對錶格的樣式進行微調考慮，不是必須
62                 gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
63             }
64             //19、刪除gridview控制元件（注意只是從文件流中刪除，實際還在記憶體當中，注意27條，現在的情況是table裡只有一個表頭
65             parentDiv.removeChild(grid);
66             //20、在文件中再建立一個div元素
67             var dummyHeader = document.createElement("div");
68             //21、把表頭table加入其中
69             dummyHeader.appendChild(table);
70             //22、把這個div插入到原來gridview的位置裡 
71             parentDiv.appendChild(dummyHeader);
72             //23、如果我們最初傳入了一個想要的表格寬度值，就將gridWidth賦上這個值
73             if (options.Width > 0) {
74                 gridWidth = options.Width;
75             }
76             //24、再建立一個div
77             var scrollableDiv = document.createElement("div");
78             //25、在原基礎上+17是因為這是一個具有滑動條的table，當出現滑動條的時候，
79             //會在寬度上多出一個條的寬度，為了使資料列與標題列保持一致，要把這個寬度算進行，
80             //17這個值也不是必須，這個可以試驗著來。
81             gridWidth = parseInt(gridWidth) + 17;
82             //26、給具有滾動條的div加上樣式，height就是我們想讓它在多大的長度時出現滾動條
83             scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";
84             //27、將gridview（目前只存在資料存在資料列）加到這個帶有滾動條的div中，這裡是從記憶體中將grid取出
85             scrollableDiv.appendChild(grid);
86             //28、將帶有滾動條的div加到table的下面
87             parentDiv.appendChild(scrollableDiv);
88         });
89     };
90 })(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: 500
7        });
8   })
9 </script>