我们项目中的分页表格功能通常都会使用一些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 } }); } }) |
最后实现的效果如下
相关推荐
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头不动,实践得出来的结果 我用的是VS2010,C#
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头固定不动 实践中所得一个具体实例 VS2010,C#
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
主要介绍了html Table 表头固定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
纯CSS实现表头固定表格滚动条效果,所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
html表格,固定表头,上下滚动时固定,左右滚动时自动对齐,缩放浏览器时,功能一样完美执行 ! 本人亲手写,亲自测试,功能完美,代码简单易懂! 对需要该功能特效的html表格的亲来说,有很大的帮助哦! 产权所有人:ぶん...
一个table表头固定,内容可滚动的实用例子,同时可以实现增加,删除功能
HTML div实现表头可以随表单内容横向滚动,表单内容可横可纵滚动
c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试
bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。
绝对可用的纯CSS固定表头样式,适用多种浏览器,实例的方式展示,我们公司开发的应用软件就用的是这种固定表头的样式
主要给大家介绍了关于如何利用纯css实现table固定列与表头,中间横向滚动的相关资料,文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们...
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头固定不动 实践中所得一个具体实例 VS2010,C#
实现表头和列固定,并可行多表头,多列(左右都可以),无错位
HTML5_html表头固定不滚动而内容滚动的效果,表格是基于Div CSS实现的,将表头固定住不滚动,而表格里面的每行数据随滚动条滚动。在显示较多数据时,当用户滚动鼠标中轮时,表格内容会滚动,而表头固定不变,可以将...
js 实现表头固定 内容滚动
这个是基于jquery库实现表头固定的一个例子,这样在页面上可以使我们做的表格更加直观
html表头固定 表体滚动,代码简单,通俗易懂