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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介:

以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程。

这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的。不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目。

对于js我完全是一个非常业余的选手,下面根据自己的现状对这个插件做了分析,反正自己是搞明白怎么回事了,有分析不对的,还请高手指教。

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

只有弄明白插件内部是怎么回事,才能知道如何去修改。

其实这里有个地方我还是不太明白,baidu之后也没能弄明白,希望明白的朋友能告诉一下,就是13和15这两个地方都用了grid.getElementsByTagName("TR")[0]);这条语句,从表面上看应该是得到的同一个tr吧?但是我通过浏览器去跟踪的时候,发现13里调用的,得到的是grid的第一个tr,就是包含th列的标题tr,15里的也是grid里的第一个tr,但是包含的是td列的第一条数据列tr。

怪就怪在执行完13后,grid里tr数少了1,就是少了包含th列的tr。我以为是appendChild方法是转移元素进行插入,而不是复制元素进行插入,但是通过查这个方法并没有明确说明是我想的那么回事。我就有些懵了。

这个插件的调用方法如下,感兴趣的朋友可以使用试试,感觉真的非常好。

1
2
3
4
5
6
7
8
9
     <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>









本文转自 我不会抽烟 51CTO博客,原文链接:http://blog.51cto.com/zhouhongyu1989/1436686,如需转载请自行联系原作者

目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
Java
轻松上手Java字节码编辑:IDEA插件VisualClassBytes全方位解析
本插件VisualClassBytes可修改class字节码,包括class信息、字段信息、内部类,常量池和方法等。
101 6
|
2月前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
113 59
|
22天前
|
SQL 数据可视化 数据库
多维度解析低代码:从技术架构到插件生态
本文深入解析低代码平台,涵盖技术架构、插件生态及应用价值。通过图形化界面和模块化设计,低代码平台降低开发门槛,提升效率,支持企业快速响应市场变化。重点分析开源低代码平台的优势,如透明架构、兼容性与扩展性、可定制化开发等,探讨其在数据处理、功能模块、插件生态等方面的技术特点,以及未来发展趋势。
|
21天前
|
SQL 数据可视化 数据库
多维度解析低代码:从技术架构到插件生态
本文深入解析低代码平台,从技术架构到插件生态,探讨其在企业数字化转型中的作用。低代码平台通过图形化界面和模块化设计降低开发门槛,加速应用开发与部署,提高市场响应速度。文章重点分析开源低代码平台的优势,如透明架构、兼容性与扩展性、可定制化开发等,并详细介绍了核心技术架构、数据处理与功能模块、插件生态及数据可视化等方面,展示了低代码平台如何支持企业在数字化转型中实现更高灵活性和创新。
41 1
|
26天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
56 4
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
45 0
|
2月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
38 0
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
146 0

推荐镜像

更多
下一篇
DataWorks