zoukankan      html  css  js  c++  java
  • JQuery固定表头插件fixedtableheader源码注释

      

      在开发XX车站信息系统时,需要将大量数据显示在一个巨大的表格内部,由于表格是一个整体,无法分页,加之数据很多,超出一屏,为了方便用户,决定使用固定表头的插件,经过测试,发现JQuery 插件:fixedtableheader可以简单方便的实现功能。

    它的使用很简单,需要设置的参数也只需2个,很实用。

      使用方法:

    //引入文件
    <script type="mce-text/javascript" src="http://i.cnblogs.com/jquery.min.js"></script>
    <script type="mce-text/javascript" src="http://i.cnblogs.com/jquery.fixedtableheader.min.js"><
    //绑定表格,headerrowsize 后面的参数是绑定需要固定的表头的行数
    <script type="mce-text/javascript">
    $(document).ready(function() { 
       $('.tbl').fixedtableheader({ 
         highlightrow: true, headerrowsize: 4
       }); 
    }); 
    </script>
    

      使用时,我发现js文件只有 4KB,我很好奇它是怎么实现的,于是就有了下文。

      大致原理是:创建一个绝对定位的table,只包含表头。当表格被用户拖动超出屏幕时,表头表格显示;表格正常显示时,表头表格隐藏。

    /* Copyright (c) 2009 Mustafa OZCAN (http://www.mustafaozcan.net)
       * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
       * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
       * Version: .0.2
       * Requires: jquery.1.3+
       */
      jQuery.fn.fixedtableheader = function(options) {
          var settings = jQuery.extend({            //jQuery.extend( target [, object1 ] [, objectN ] )
              headerrowsize: 1,                    //这是默认参数
             highlightrow: false,                
             highlightclass: "highlight"           
         },
         options);                                //用户设置的参数
                                                 //如果用户设置参数,会覆盖对应的默认参数
         this.each(function(i) {                    //处理每个table(该插件使用class属性绑定,会存在多个table)
             var $tbl = $(this);
             var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");    //找到要固定表头tr
             var headerelement = "th";
             if ($tblhfixed.find(headerelement).length == 0) headerelement = "td";    //没有th,默认td为表头单元格
             if ($tblhfixed.find(headerelement).length > 0) {                        //有th单元格
                 $tblhfixed.find(headerelement).each(function() {            
                     $(this).css("width", $(this).width());                //设置表头th宽度
                 });
                 var $clonedTable = $tbl.clone().empty();                //创建表头表格,即一对完整的table标签
                 var tblwidth = GetTblWidth($tbl);
                 $clonedTable.attr("id", "fixedtableheader" + i).css({    //设置悬浮表头绝对定位的位置
                     "position": "fixed",                                
                     "top": "0",
                     "left": $tbl.offset().left                            //.offset(): 获取表格的左边距
                 }).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body"));    //将表头插入table标签中
                 if (settings.highlightrow)                                                    //鼠标移过高亮
                     $("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function() {
                         $(this).addClass(settings.highlightclass);
                     },
                     function() {
                         $(this).removeClass(settings.highlightclass);
                 });
                 $(window).scroll(function() {                            //当滚动条发生变化时触发scroll事件                    
                     if (jQuery.browser.msie && jQuery.browser.version == "6.0") 		//IE6.0
        			$clonedTable.css({								  //
                         "position": "absolute",
                         "top": $(window).scrollTop(),
                         "left": $tbl.offset().left
                     });
                     else $clonedTable.css({
                         "position": "fixed",
                         "top": "0",
                         "left": $tbl.offset().left - $(window).scrollLeft()
                     })
                     var sctop = $(window).scrollTop();		//页面滚动条向下滚动的高度,也即页面被隐藏的高度
                     var elmtop = $tblhfixed.offset().top;	//此时原始表格距离浏览器客户区顶端的高度
                     if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height())) 
    					$clonedTable.show();			//原来的表头被滚动的不可见并且表格主体尚未被滚动出屏幕
                     else 
    					$clonedTable.hide();			//
                 });
                 $(window).resize(function() {
                     if ($clonedTable.outerWidth() != $tbl.outerWidth()) {		//若悬浮表跟不上resize的变化
                         $tblhfixed.find(headerelement).each(function(index) {	//重新设置悬浮表头clonedTable每个th/td的宽度
                             var w = $(this).width();
                             $(this).css("width", w);
                             $clonedTable.find(headerelement).eq(index).css("width", w);
                         });
                         $clonedTable.width($tbl.outerWidth());					//设置悬浮表的宽度,注意这里.width()和css('width')的区别
                     }
                     $clonedTable.css("left", $tbl.offset().left);				//jquery中offset是相对于浏览器客户区的相对偏移
                 });
             }
         });
         function GetTblWidth($tbl) {		//获取元素宽度(包括padding和border)
             var tblwidth = $tbl.outerWidth();
             return tblwidth;
         }
     };
    
    
    

    在注释该代码过程中,一个很严重的疑惑产生了:

    JQuery的.width() 和 CSS width 貌似不统一,有很大区别!所以又细细深入研究了一番,收获详见这里

    IE6不能使用position:fixed,具体见这里

    后记:2014-06-17

    其实这个根本就达不到所谓的“fixtableheader”的效果,因为它只是简单的额把所有的表头都固定在了浏览器客户区的顶部,而非是table所在区域的顶部。

    请看这个演示错误的Demo

  • 相关阅读:
    阿里云 k8s 部署 Spring Cloud Alibaba 微服务实践 (四) 自动化部署
    阿里云 k8s 部署 Spring Cloud Alibaba 微服务实践 (三) 服务观测
    阿里云 k8s 部署 Spring Cloud Alibaba 微服务实践 (二) 部署微服务程序
    阿里云 k8s 部署 Spring Cloud Alibaba 微服务实践 (一) 部署 Nacos
    C++知识点
    libmkl 学习笔记
    基于tesseract-OCR进行中文识别
    poco编译与运行
    Linux下的I/O复用与epoll详解(转载)
    高并发网络编程之epoll详解(转载)
  • 原文地址:https://www.cnblogs.com/muyun/p/3564600.html
Copyright © 2011-2022 走看看