我们项目中的分页表格功能通常都会使用一些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 } }); } }) |
最后实现的效果如下
