原生javascript 固定表头原理与源码

    我在工作中需要固定表头这个功能,我不想去找,没意思。于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫  “freeze-header” ,算了,看心情吧,最近心情不太好就不改了~~~

想了想,我还是改成原生吧,angularjs就是个毛毛~~~。

先讲一下思路:

    1.想一想,再想一想,肯定用定位了,具体是绝对定位还是固定定位,看实际情况;

    2.clone 一份thead元素,用于再创建一个定位的表头;

    3.clone有点坑,不能clone当前元素的 实际 宽高 和 事件, 只能获取原先的加上;

    4.加scroll事件;

    5.我很开心,成功了~~~~;

先把页面创建了 ,就叫fixHeaderDemo.html,如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{box-sizing: border-box;}
 8         .table{max-width: 100%; width: 100%;border-collapse: collapse;}
 9         .table>thead>tr>th{background-color: #059ca1; color:#FFF; padding-top:10px;padding-bottom: 10px;}
10         .table>thead>tr>th,.table>tbody>tr>td{
11             border:1px solid #CCC;
12         }
13     </style>
14 </head>
15 <body>
16 <div style="width: 80%; margin:40px auto; height: 100px;overflow: auto;position: relative;">
17     <table class="table">
18         <thead>
19         <tr>
20             <th>Name1</th>
21             <th>Name2</th>
22             <th>Name3</th>
23         </tr>
24         </thead>
25         <tbody>
26         <tr>
27             <td>亚瑟</td>
28             <td>荆轲</td>
29             <td>程咬金</td>
30         </tr><tr>
31             <td>亚瑟</td>
32             <td>荆轲</td>
33             <td>程咬金</td>
34         </tr><tr>
35             <td>亚瑟</td>
36             <td>荆轲</td>
37             <td>程咬金</td>
38         </tr><tr>
39             <td>亚瑟</td>
40             <td>荆轲</td>
41             <td>程咬金</td>
42         </tr><tr>
43             <td>亚瑟</td>
44             <td>荆轲</td>
45             <td>程咬金</td>
46         </tr><tr>
47             <td>亚瑟</td>
48             <td>荆轲</td>
49             <td>程咬金</td>
50         </tr><tr>
51             <td>亚瑟</td>
52             <td>荆轲</td>
53             <td>程咬金</td>
54         </tr><tr>
55             <td>亚瑟</td>
56             <td>荆轲</td>
57             <td>程咬金</td>
58         </tr><tr>
59             <td>亚瑟</td>
60             <td>荆轲</td>
61             <td>程咬金</td>
62         </tr><tr>
63             <td>亚瑟</td>
64             <td>荆轲</td>
65             <td>程咬金</td>
66         </tr><tr>
67             <td>亚瑟</td>
68             <td>荆轲</td>
69             <td>程咬金</td>
70         </tr><tr>
71             <td>亚瑟</td>
72             <td>荆轲</td>
73             <td>程咬金</td>
74         </tr><tr>
75             <td>亚瑟</td>
76             <td>荆轲</td>
77             <td>程咬金</td>
78         </tr>
79         </tbody>
80     </table>
81 </div>
82 </body>
83 </html>

 

上面的都太小儿科了,js才是关键。

 

其实真的很简单,有兴趣还能在优化:

第一步,先来个构造函数,这个构造函数接收一个参数,也就是你要固定的那个表格,代码如下:

1 function FixHeader(tableElement){
2     this.tableElement=tableElement;
3 }

 

第二步,写FixHeader构造函数的方法:

1 FixHeader.prototype={
2     constructor:FixHeader,
3     init:function(){
4       //这个位置是初始化的位置      
5     }
6 };

 

第三步,其实我们的滚动是表格外面有个div父级元素,设置了他的最大高度,当超过这个最大高度就显示滚动条。那么,我们在初始化函数中肯定先获取div和表头元素等一些初始的事情;

1  init:function(){
2     //获取表格的父级元素
3     this.tableParent=this.tableElement.parentNode;
4     //获取thead元素
5     this.header=this.tableElement.querySelector('thead');
6     //克隆thead元素
7     this.cloneHeader=this.header.cloneNode(true);
8  }

第四步,我们要用克隆的数据,往表格中插入一个固定的表头,可能会问为什么要clone一下呢?因为如果直接操作原来的表头数据会直接影响,我们不是要去动原来的东西,那些东西已经完美了;如果你有兴趣可以

      尝试一下,你会收获很大。在FixHeader原型中加了一个cloneFixHeader函数

1 cloneFixHeader:function(){
2     this.cloneHeader.className='cloneThead';
3     this.cloneHeader.style.position='absolute';
4     this.cloneHeader.style.top=0;
5     this.cloneHeader.style.left=0;
6     this.cloneHeader.style.right='-1px';
7     this.tableElement.appendChild(this.cloneHeader);
8 }

上面的代码大家肯定明白,就是给clone的元素加一些样式和属性,加一个className是为了标识它是克隆的。那先看看效果,在初始化函数中调用cloneFixHeader()函数;

运行的截图如下:

我的天哪,这是怎么回事,怎么这个熊样了。哈哈。。。上面我已经说了clone不能把原来的宽高和事件一起克隆了,有些人是在css中把每个表格的宽度都写死,这是多么不好的做法,每次加或者减一列,都要修改css中的宽度。那我们是怎么解决的呢?太简单了,把每个元素的宽高设置到clone的元素中不就可以了吗!

 1 cloneFixHeader:function(){
 2     var cloneThs=this.cloneHeader.children[0].children,
 3         ths=this.header.children[0].children,
 4         th,cloneTh,i=0,l=cloneThs.length;
 5     for(;i<l;i++){
 6         th=ths[i];cloneTh=cloneThs[i];
 7         cloneTh.style.width=th.offsetWidth+'px';
 8         cloneTh.style.height=th.offsetHeight+'px';
 9     }
10     this.cloneHeader.className='cloneThead';
11     this.cloneHeader.style.position='absolute';
12     this.cloneHeader.style.top=0;
13     this.cloneHeader.style.left=0;
14     this.cloneHeader.style.right='-1px';
15     this.tableElement.appendChild(this.cloneHeader);
16 }

运行的结果如下(太完美了~~~):

第五步,应该监听滚动事件了。先在原型中加一个函数叫listenerScroll ,代码如下:

 1 listenerScroll:function(ev){
 2     var top=ev.target.scrollTop,
 3             //用于判断是否已经添加上了,添加了就不让再次添加
 4             cloneThead=ev.target.querySelector('.cloneThead');
 5     if(top>0){
 6         if(cloneThead){
 7             cloneThead.style.display='block';
 8             cloneThead.style.top=top+'px';
 9             return;
10         }
11         this.cloneFixHeader();
12     }else{
13         if(cloneThead){
14             cloneThead.style.display='none';
15         }
16     }
17 },

把在init中调用的cloneFixHeader() 函数换成监听事件:

1 init:function(){
2     this.tableParent=this.tableElement.parentNode;
3     this.header=this.tableElement.querySelector('thead');
4     this.cloneHeader=this.header.cloneNode(true);
5     this.tableParent.addEventListener('scroll',this.listenerScroll.bind(this),false);
6 },

上面看似完美了,但是当你改变浏览器窗口大小时,你会惊讶于我是多么认真与细心,是的,当窗口变化时,一切都不完美了,原因你应该知道的呀!

截图如下:

亲,你想到了方法吗?是的,就是监听窗口大小变化,好了再加一个listenerResize函数:

 1 listenerResize:function(){
 2     var that=this;
 3     if(that.timer){
 4         clearTimeout(that.timer);
 5     }
 6     that.timer=setTimeout(function(){
 7         var top=that.tableParent.scrollTop;
 8         if(top<=0){
 9             return;
10         }
11         var globalWidth=that.global.innerWidth;
12         if(that.globalWidth&&that.globalWidth==globalWidth){
13             return;
14         }
15         that.globalWidth=globalWidth;
16         var cloneThead=that.tableElement.querySelector('.cloneThead'),
17              theads=that.tableElement.querySelectorAll('thead'),i,l=theads.length;
18         for(i=0;i<l;i++){
19             if(theads[i].className!='cloneThead'){
20                 that.header=theads[i];
21                 break;
22             }
23         }
24         if(cloneThead){
25             var cloneThs=cloneThead.children[0].children,
26                     ths=that.header.children[0].children,
27                     th,cloneTh;
28             l=cloneThs.length;
29             for(i=0;i<l;i++){
30                 th=ths[i];cloneTh=cloneThs[i];
31                 cloneTh.style.width=th.offsetWidth+'px';
32                 cloneTh.style.height=th.offsetHeight+'px';
33             }
34             return;
35         }
36         that.cloneFixHeader();
37     },60);
38 },

最后全部js代码如下:

 1 function FixHeader(tableElement, global) {
 2         this.tableElement = tableElement;
 3         this.global = global;
 4         this.timer = null;
 5     }
 6     FixHeader.prototype = {
 7         constructor: FixHeader,
 8         init: function () {
 9             this.tableParent = this.tableElement.parentNode;
10             this.header = this.tableElement.querySelector('thead');
11             this.cloneHeader = this.header.cloneNode(true);
12             this.tableParent.addEventListener('scroll', this.listenerScroll.bind(this), false);
13             this.global.addEventListener('resize', this.listenerResize.bind(this), false);
14         },
15         listenerScroll: function (ev) {
16             var top = ev.target.scrollTop,
17             //用于判断是否已经添加上了,添加了就不让再次添加
18                     cloneThead = ev.target.querySelector('.cloneThead');
19             if (top > 0) {
20                 if (cloneThead) {
21                     cloneThead.style.display = 'block';
22                     cloneThead.style.top = top + 'px';
23                     return;
24                 }
25                 this.cloneFixHeader();
26             } else {
27                 if (cloneThead) {
28                     cloneThead.style.display = 'none';
29                 }
30             }
31         },
32         listenerResize: function () {
33             var that = this;
34             if (that.timer) {
35                 clearTimeout(that.timer);
36             }
37             that.timer = setTimeout(function () {
38                 var top = that.tableParent.scrollTop;
39                 if (top <= 0) {
40                     return;
41                 }
42                 var globalWidth = that.global.innerWidth;
43                 if (that.globalWidth && that.globalWidth == globalWidth) {
44                     return;
45                 }
46                 that.globalWidth = globalWidth;
47                 var cloneThead = that.tableElement.querySelector('.cloneThead'),
48                         theads = that.tableElement.querySelectorAll('thead'), i, l = theads.length;
49                 for (i = 0; i < l; i++) {
50                     if (theads[i].className != 'cloneThead') {
51                         that.header = theads[i];
52                         break;
53                     }
54                 }
55                 if (cloneThead) {
56                     var cloneThs = cloneThead.children[0].children,
57                             ths = that.header.children[0].children,
58                             th, cloneTh;
59                     l = cloneThs.length;
60                     for (i = 0; i < l; i++) {
61                         th = ths[i];
62                         cloneTh = cloneThs[i];
63                         cloneTh.style.width = th.offsetWidth + 'px';
64                         cloneTh.style.height = th.offsetHeight + 'px';
65                     }
66                     return;
67                 }
68                 that.cloneFixHeader();
69             }, 60);
70         },
71         cloneFixHeader: function () {
72             var cloneThs = this.cloneHeader.children[0].children,
73                     ths = this.header.children[0].children,
74                     th, cloneTh, i = 0, l = cloneThs.length;
75             for (; i < l; i++) {
76                 th = ths[i];
77                 cloneTh = cloneThs[i];
78                 cloneTh.style.width = th.offsetWidth + 'px';
79                 cloneTh.style.height = th.offsetHeight + 'px';
80             }
81             this.cloneHeader.className = 'cloneThead';
82             this.cloneHeader.style.position = 'absolute';
83             this.cloneHeader.style.top = 0;
84             this.cloneHeader.style.left = 0;
85             this.cloneHeader.style.right = '-1px';
86             this.tableElement.appendChild(this.cloneHeader);
87         }
88     };

调用方式如下:

1  new FixHeader(document.querySelector('.table'), window).init();

总结:

表头固定可以用了,不过由于我知识有限,可能上面有错误的地方,请大家批评指出。

posted @ 2016-12-07 18:22  zhanglearning  阅读(1546)  评论(0编辑  收藏  举报