jQuery制作多表格固定表头、切换表头的特效
做了好几天的固定表头特效,总算是搞定了。先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下拉滚动条的时候,表格的表头固定住。这样对付只有一张表格的网页还好,如果表格多了,又会 很麻烦。我做的这个特效综合了固定表格表头的功能,同时,还能在浏览不同表格时候,切换固定的表头。效果如图所示:
我 在做这个特效的时候,首先考虑的是怎样固定住表头。在网上搜到一个不错的固定表头Jquery插件-chromatable。基本的思路都一样,就是现将 整个表格复制一遍,然后将表头和表身分离,分别用div包住,设置好表身最大的高度,并显示滚动条,在拉动滚动条时,表头因为已经和表身分离,所以不会随 着页面下拉而滚动。我将这个插件重写了一遍,代码如下:
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
|
( function ($) { $.fn.extend({ ScrollTable: function (options) { var defaults = { MaxHeight: 600, MaxDataItemIndex: 1 // 固定前MaxDataItemIndex作为固定表头 }; options = $.extend(defaults, options); return this .each( function () { var $ this = $( this ); //设置表格自动换行 $ this .css({ "table-layout" : "fixed" }); $ this .find( 'td' ).css({ "word-break" : "break-all" , "word-wrap" : "break-word" }); // 产生表头部分和身体部分 var $cloneTableHeader = $ this .clone(); var $cloneTableBody = $ this .clone(); $cloneTableHeader.find( "tr" ).filter( function (index) { return index >= options.MaxDataItemIndex }).remove(); $cloneTableBody.find( "tr" ).filter( function (index) { return index < options.MaxDataItemIndex }).remove(); //设置单元格边框 $cloneTableHeader.find( "tr" ).css({ "border" : "1px blue solid" }); $cloneTableBody.find( "td" ).css({ "border" : "1px blue solid" }); // 将产生的表头和身体部分放入Container,并做一些微调 $ this .after( "<div class='ScrollTableContainer' style='border:1px solid;margin:10px 0;'></div>" ); $ this .next().append($cloneTableHeader); $ this .next().append( "<div class='ScrollDiv' style='overflow-y:scroll;'></div>" ); $ this .next().css( "width" , $ this .width()); $ this .next().find( "div.ScrollDiv" ).css({ "max-height" : options.MaxHeight, "margin-top" : -2 }); $ this .next().find( "div.ScrollDiv" ).append($cloneTableBody); $ this .remove(); }); } }); })(jQuery) |
接下来,我在网上搜了一下怎样固定,同时切换块级元素。代码如下:
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<script> $( function () { //设置内容块的宽度与导航块的宽度一样 $( ".Xc_list_top" ).css( "width" ,$( ".Xc_list_main" ).width()); var resetRightPanelPostion = function () { //在JQuery中,可以利用导航工具类$.browser来判断浏览器类型 var msie6 = $.browser.msie && $.browser.version == '6.0' && $.browser.version < 7; //获取body元素标签 if ($.browser.safari) { bodyelem = $( "body" ); } else { bodyelem = $( "html,body" ); } //$(selector).scrollTop(offset),offset是相对滚动条顶部的偏移,以像素计。获取滚动条距离顶部的距离。 var bodyTop = bodyelem.scrollTop(); //offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。这里是获取相对于文档的顶部偏移。 var top = $( ".Xc_left" ).offset().top; //var t = $("#public_footer").offset().top; var t = $( "#footerDestinationBox" ).offset().top; //var bottom = $("#footerDestinationBox").offset().top; //循环遍历class为Xc_list_top的数组的成员 for ( var i = 0; i < $( ".Xc_list .Xc_list_top" ).length ; i++){ /*标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距*/ //当滚动条向下移动的偏移量大于等于元素相对文档顶部的偏移量时(即左边的div顶部接触到窗口顶部) //滚动条往下拉动的距离等于底部相对顶部偏移量不断减少的距离,所以 //bodyTop = t - $("#footerDestinationBox").offset().top //当底部div距离顶部的长度等于左边div的 //outheight = $("#footerDestinationBox").offset().top时, //底部与$('.Xc_left')接触 //所以(bodyTop + $(".Xc_left").outerHeight())<t)指底部的div还没有将左边的div完全顶出。 if (bodyTop >= top && ((bodyTop + $( ".Xc_left" ).outerHeight()) < t)) { //如果ie浏览器的版本不是6或6以下 if (!msie6) { if (bodyTop + $( ".Xc_gg" ).outerHeight() >= t) { $( ".Xc_gg" ).removeClass( 'fixed' ).css({ "position" : "absolute" , "top" : t - $( ".Xc_gg" ).outerHeight() + "px" }); } else { $( ".Xc_gg" ).css({ "position" : "fixed" , "top" : 0 }); } } } else { if (!msie6) { $( ".Xc_gg" ).css({ "position" : "static" }); } } /*if(bodyTop>$(".Xc_list").eq(i).offset().top){ $(".Xc_list_top").eq(i).css({position:"absolute",top:top-168}); }*/ if (bodyTop>$( ".Xc_list" ).eq(i).offset().top){ $( ".Xc_list_top" ).eq(i).css({position: "fixed" ,top:0}); } if (bodyTop<=$( ".Xc_list" ).eq(i).offset().top){ $( ".Xc_list_top" ).eq(i).css({position: "static" ,top:0}); } } }; window.onload = function () { //判断div.Xc_gg是否存在 if ($( ".Xc_gg" ).length) { resetRightPanelPostion(); $(window).scroll( function () { resetRightPanelPostion(); }); } } }) </script> |
最后,综合上面的两种功能,先修改插件chromatable中的代码,将 "$this.next().append("<div class='ScrollDiv' style='overflow-y:scroll;'></div>");"
这一行代码中的style='overflow-y:scroll'样式去掉,这样就不会出现滚动条。然后,将头部的代码包裹在一个class属性
为'ScrollHeader'的div中。代码如下:
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
|
( function ($) { $.fn.extend({ ScrollTable : function (options){ var defaults = { // SwitchTag : 'tr', //默认表头标签为tr MaxHeight : 400, MaxDataItemIndex : 1 //固定前多少列为表头 }; options = $.extend(defaults,options); return this .each( function (){ var $ this = $( this ); //设置表格内容自动换行 $ this .css({ "table-layout" : "fixed" }); $ this .find( 'td' ).css({ "word-break" : "break-all" , "word-wrap" : "break-word" }); // 产生表头部分和身体部分 // 复制表格内容 var $newTableHeader = $ this .clone(); var $newTableBody = $ this .clone(); // 产生表头部分和身体部分,filter()遍历并根据参数做为选择器来筛选。 $newTableHeader.find( "tr" ).filter( function (index){ return index >= options.MaxDataItemIndex }).remove(); $newTableBody.find( "tr" ).filter( function (index){ return index < options.MaxDataItemIndex }).remove(); //设置单元格边框 $newTableHeader.find( "tr" ).css({ "border" : "1px blue solid" }); $newTableBody.find( "td" ).css({ "border" : "1px blue solid" }); // 将产生的表头和身体部分放入Container $ this .after( "<div class='ScrollTableContainer' style='border:1px solid;margin:10px 0;'></div>" ); $ this .next().append( "<div class='ScrollHeader'></div>" ); //$this.next().append($newTableHeader); $ this .next().append( "<div class='ScrollDiv'></div>" ); $ this .next().css( "width" , $ this .width()); //将表头部分添加到class属性为ScrollHeader的div元素中 $ this .next().find( "div.ScrollHeader" ).append($newTableHeader); $ this .next().find( "div.ScrollDiv" ).css({ "max-height" : options.MaxHeight, //"margin-top": -2 }); $ this .next().find( "div.ScrollDiv" ).append($newTableBody); $ this .remove(); }); } }); })(jQuery); |
接着,我们还要将切换代码写进去,我们来到表格页面,加入以下jquery代码:
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
|
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script> <script src= "./jquery.chrometable.js" ></script> <script> $( function (){ $( 'table' ).ScrollTable(); <span style= "text-decoration: underline;" ><span style= "color: #ff0000; text-decoration: underline;" > //$(window).scroll(function(){}),当鼠标拖动滚动条时触发一次该函数,如果不这样写,就无法动态地获取bodyTop, //也就是滚动条距离顶部距离的值。但是如果不断地触发ScroolTable()会造成脚本运行错乱。</span></span> //单独将动态获取bodyTop写成一个函数。 var bodyTop = function (){ //获取body元素标签 if ($.browser.safari) { bodyelem = $( "body" ); } else { bodyelem = $( "html,body" ); } //获取滚动条与body元素顶部的距离 var bodyTop = bodyelem.scrollTop(); var num = $( ".ScrollTableContainer .ScrollHeader" ).length; //循环遍历class为ScrollTableContainer的div成员,即遍历多个表格table元素中的表头 for ( var i = 0;i<num;i++){ if (bodyTop >$( ".ScrollTableContainer" ).eq(i).offset().top){ $( ".ScrollHeader" ).eq(i).css({position: "fixed" ,top:0,backgroundColor: "red" }); } if (bodyTop <=$( ".ScrollTableContainer" ).eq(i).offset().top){ $( ".ScrollHeader" ).eq(i).css({position: "static" ,top:0}); } } } $(window).scroll( function () { bodyTop(); }); }) </script> |
最后,我在这里要说明以下我犯的两个小错误,第一个就是在写Jquery代码时,将固定格式:
1
|
( function ($){})(jQuery) |
中的"jQuery"写成了Jquery,耗了我很多精力去排错!
jQuery(function(){ });用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在。不可用于存放开发插件的代码,因为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数)。
(function(){ })(jQuery);用于存放开发插件的代码,执行其中代码时DOM不一定存在,所以直接自动执行DOM操作的代码请小心使用。
第 二个就是,我刚刚开始把切换表头的代码写在插件文件一起,发现bodyTop的值一直没有变过,只有刷新一下才能实现功能,原来是要加入滚动条事件来不断 触发函数保证动态获取滚动条鼓励顶部的值bodyTop。但是,一定要将这个函数分离出来,如果写在一起,就会让整个固定表头的脚本也随着滚动条的拖动而 不断运行。
最后,将上面的三个例子全部都共享出来给大家下载。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步