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>