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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
vue中使用props传值的方法
May 08 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
npm qs模块使用详解
Feb 07 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php获取apk包信息的方法
2014/08/15 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
jquery属性过滤选择器使用示例
2013/06/18 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
详解Python中DOM方法的动态性
2015/04/11 Python
python使用minimax算法实现五子棋
2019/07/29 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
opencv实现图像平移效果
2021/03/24 Python
春节联欢会策划方案
2014/05/16 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
房产电话营销开场白
2015/05/29 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书