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


Posted in Javascript onJuly 17, 2014

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

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

/*!
* 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方法是转移元素进行插入,而不是复制元素进行插入,但是通过查这个方法并没有明确说明是我想的那么回事。我就有些懵了。

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

<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>
Javascript 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
Express.JS使用详解
Jul 17 #Javascript
JavaScript DOM节点添加示例
Jul 16 #Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 #Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 #Javascript
jQuery ajax调用WCF服务实例
Jul 16 #Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 #Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP中的session安全吗?
2016/01/22 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
VueJS全面解析
2016/11/10 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
浅析使用Python操作文件
2017/07/31 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
大学校务公开实施方案
2014/03/31 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
高中运动会广播稿
2014/09/16 职场文书
计算机实训报告总结
2014/11/05 职场文书
大学生自荐信范文
2015/03/05 职场文书
欠条格式范本
2015/07/03 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
搭建Yolov5服务器
2022/04/30 Servers