固定表头列头Javascript代码

阅读更多

 
 
     
     
     
 
 
   
 
        
 
            
 
                
 
                    
 
                        ID0
 
                    
 
                        CK0
 
                    
 
                        Code0
 
                    
 
                        Descirption0
 
                    
 
                        TOL0
 
                    
 
                        XS0
 
                    
 
                        SS0
 
                    
 
                        MS0
 
                    
 
                        DS0
 
                    
 
                        BS0
 
                    
 
                        XL0
 
                    
 
                        ML0
 
                    
 
                        DL0
 
                    
 
                        EM0
 
                    
 
                        BM0
 
                
 
                
 
                    
 
                        88
 
                    
 
                        88
 
                    
 
                        88
 
                    
 
                        88
 
                    
 
                        88
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                    
 
                        22
 
                
 
                
 
                    
 
                        111
 
                    
 
                        111
 
                    
 
                        1111
 
                    
 
                        This is Test
 
                    
 
                        1
 
                    
 
                        001
 
                    
 
                        002
 
                    
 
                        003
 
                    
 
                        004
 
                    
 
                        005
 
                    
 
                        006
 
                    
 
                        007
 
                    
 
                        008
 
                    
 
                        009
 
                    
 
                        010
 
                
 
                
 
                    
 
                        111
 
                    
 
                        111
 
                    
 
                        1111
 
                    
 
                        This is Test
 
                    
 
                        1
 
                    
 
                        001
 
                    
 
                        002
 
                    
 
                        003
 
                    
 
                        004
 
                    
 
                        005
 
                    
 
                        006
 
                    
 
                        007
 
                    
 
                        008
 
                    
 
                        009
 
                    
 
                        010
 
                
 
                
 
                    
 
                        111
 
                    
 
                        111
 
                    
 
                        1111
 
                    
 
                        This is Test
 
                    
 
                        1
 
                    
 
                        001
 
                    
 
                        002
 
                    
 
                        003
 
                    
 
                        004
 
                    
 
                        005
 
                    
 
                        006
 
                    
 
                        007
 
                    
 
                        008
 
                    
 
                        009
 
                    
 
                        010
 
                
 
                
 
                    
 
                        111
 
                    
 
                        111
 
                    
 
                        1111
 
                    
 
                        This is Test
 
                    
 
                        1
 
                    
 
                        001
 
                    
 
                        002
 
                    
 
                        003
 
                    
 
                        004
 
                    
 
                        005
 
                    
 
                        006
 
                    
 
                        007
 
                    
 
                        008
 
                    
 
                        009
 
                    
 
                        010
 
                
 
            
 
        
 
    
 

 
 
 

 

 

通过样式表来实现固定表头和列。效果确实不错。但是对于其中的疑问和问题这里需要补充一下。原文中设了三个样式，FixedTitleRow标题行(TR) 的样式，FixedTitleColumn标题列(TD)的样式及FixedDataColumn数据列(TD)的样式；在这三种样式中都统一设置 position属性为relative，这个设置是非常重要的，relative的解释说明是这样的：

Setting the property to relative places the object in the natural HTML flow of the document, but offsets the position of the object based on the preceding content. (设置HTML文档中的对象属性为relative时，其位移是相对于前面内容对象的)

也就是说那些固定列头的位置(left,top)是在当前所在的位置的基础上偏移的，其偏移量就是在样式中设置的left或top属性值。例如偏移量是10，则当前列头的位置则向右偏移10个象素，如果是-10，则向左偏移10个象素；所以在样式中可以看到下面的代码：

//这里的expression函数是计算js表达式的值
top: expression(this.offsetParent.scrollTop);
left: expression(this.parentElement.offsetParent.scrollLeft);

其作用就是将当前TABLE所属的DIV的滚动条的偏移位置(top,left)付给固定列头的left或top属性，这样当滚动条拖动时，固定列头就不会随之移动啦！这也是样式的expression强大之处，它可以在运行时实时计算left和top值而不需要我们写一句代码。如果真要用JS代码来实现此功能，估计没百把行是不可能完成的，并且实现起来也不是那么容易。

另外一个感到疑惑的是在样式expression表达式中，又是this.parentElement，又是this.offsetParent，觉得有点乱。其实都是为了得到TABLE所属的DIV对象，但我很少用parentElement属性，如果想要以document层次树更清晰的表达，推荐用 parentNode。所以我对原文中的expression改成了如下形式：是不是比以前的表达式清晰？！呵呵，在上面需要注意一点的就是TR的parentNode是TBODY，就算你TABLE中没有写，它也是隐藏的。所以TR追溯到DIV需要3级，TD则需要4级；

      

 .FixedTitleRow
        {...}{
            position: relative; 
            top: expression(this.parentNode.parentNode.parentNode.scrollTop); 
            z-index: 10;
            background-color: #E6ECF0;
        }
        
        .FixedTitleColumn
        {...}{
            position: relative; 
            left: expression(this.parentNode.parentNode.parentNode.parentNode.scrollLeft);
        }
        
        .FixedDataColumn
        {...}{
            position: relative; 
            left: expression(this.parentNode.parentNode.parentNode.parentNode.scrollLeft);
            background-color: #E6ECF0;
        }

  

在你将上面的示例代码准备运用到你的项目中时，请注意如下几点：

• 不要将div的宽度或高度设置的比固定列的宽度或高度要小，否则是永远也看不到滚动的内容的；
• 固定列只设置前面几列即可，不要设置最后面哦。那样最后的固定列同样也是看不到内容的。不过没有人会那么变态将固定列设到最后的几列！
• 你设置了固定列样式FixedTitleColumn，当然对应的显示数据列也要设置FixedDataColumn哦！