实现表头纵向滚动固定横向跟随

我们项目中的分页表格功能通常都会使用一些js开源组件，如ExtJs里的grid，jquery的插件如ligerui，bootstrap插件如bootstrap table等，但最近项目中由于想更加灵活调整式样设计，所以打算自己实现分页表格，由于项目中经常需要展示大量的数据，这时遇到的第一个问题就是如何实现表头标题行在纵向滚动时固定，横向滚动时跟随内容。后来查看ExtJs源码找到答案，本文就讲解下如何完美实现。

 

 

上下可拖动表格

 

首先编写一个可上下拖动的表格如下图所示

注意图中右上角，第一行标题位于整个纵向和横向滚动条区域内，也就是说当往下滚动时，第一行标题也跟着滚上去看不到了。

这种表格布局如下图所示：

布局图1

 

HTML布局看下图：

 

 

其实就是通过overflow:auto实现的滚动。

 

 

固定表头

为了实现在上下滚动时标题固定，把上面表格拆分为两个，上面一个显示标题，下面显示内容，标题部分表格使用overflow:hide隐藏滚动条，内容部分使用overflow:auto显示，如下图

布局图2

 

 HTML布局如下：

 

 

自动适配标题和内容每列宽度

拆分表格后，这是一个问题来了，就是标题和内容每列（td）的宽度不会自动对应为一致了，一种方法是手工设置标题和内容每个td的宽度，如<td width=’100px’>。每次标题调整宽度时，也对应更改内容部分对应td的值。

另外一种更快捷的方法是使用JS自动设置内容区每列的宽度，下面代码是使用Jquery实现的自动适配

var i=0;

$('.x-grid .x-grid-head tr:last td').each(function(){

    var w=$(this).width();

    $('.x-grid .x-grid-content tr:eq(0)').each(function(){

       $(this).children("td:eq("+i+")").width(w);

    });

    i++;

})

 

实现横向滚动

最后需要实现的就是当横向滚动时，标题也跟着滚动，这个可以通过js实现监听滚动事件，例如使用jquery的position().left可以获取滚动后内容距离页面左边的距离，小于0就是滚出页面了，然后设置标题的left等于内容区的left就行，下面是jquery实现代码

//记录内容区显示的初始位置(left)

var ccLeft=0;

var tr0 = $('.x-grid .x-grid-content tr:eq(0)');

if(tr0.position()){

    ccLeft = tr0.position().left;

}

 

//横向滚动事件，实现同时横向滚动表头

$('.x-grid .x-grid-content').scroll(function() {

    // 检测是否横向滚动

    if (ccLeft != $(this)[0].scrollLeft) {

       // 滚动表头

       ccLeft = $(this).find("tr:eq(0)").position().left;

       $('.x-grid .x-grid-head').offset(function(idx, old) {

           return {

              top : old.top,

              left : ccLeft

           }

       });

    }

})

 

最后实现的效果如下