表头锁定可滚动的表格 - BizStruct 商业架构

原创 2006年05月22日 21:03:00

表头锁定可滚动的表格 - BizStruct 商业架构

基于架构的富界面Web应用的可视化快速开发平台

    浏览器里标准的表格展现方式比较简单,表格行数多时,页面会有滚动条,浏览数据不方便。

    一种解决方法是把表格数据全部显示,通过 DIV 来把表格固定在一个范围内,表格只能在这个范围内滚动;更进一步的是通过 javascript 或 css 把标题锁定在顶端。这种方式存在几个问题,一是不能确保显示完整的行,会有显示半行的情况; 二是因为所有的行都是显示在浏览器里的,行数过多时,会占用大量的资源;另外这种方式无法利用 AJAX 来动态下载表格数据。

    另一种解决方法是将表格数据缓存在内存中, 表格每次只显示一页的数据,通过分页浏览条或页码连接在分页之间切换;这种方式可以充分的利用 AJAX 来动态下载表格数据;存在的问题一是数据的展示和操作分离,不直观; 二是数据浏览不平滑,不能同时展示相邻页的数据。

    我们的解决方案采用了更复杂的实现技术,从而使表格有了更好的展现效果。将表格数据缓存在内存,每次只显示一页的数据,当表格的数据量很大时,也只占用较少的浏览器资源;通过滚动条操作,和表格一体化,操作很方便。

    通过浏览器提供的 DOM 模型,我们几乎可以对表格进行任意的操作,包括添加、删除、修改行或单元格。我们只要删除表头下面的一行,将新行添加到表格的底部,就可以实现表格的向下滚动;删除表格底部行,将新行添加到表头的下面一行,就可以实现表格的向上滚动;而同时表头又是锁定的。

    其中涉及到的几项技术,一是表格数据的缓存,XML 文档为我们提供了很大的便利,通过 XML 文档,我们可以很容易的保存、检索和读取表格数据。二是表格行的生成,如果完全通过 DOM,技术难度不大,但工作量大,运行效率较低;更好的方式是 XSLT 和 DOM 的组合,通过 表格的 XML 文档和 XSLT 生成表格行的 HTML,然后通过 DOM 插入到表格中。

   下面是我们表格的图示,您也可以访问我们的网站 www.BizStruct.cn,对我们演示的表格进行操作,

  

    通过滚动条的操作,可以实现向上一页,向上一行,向下一行,向下一页和托拽定位的操作。用鼠标左键点击表格标题,设置键盘的输入焦点后,通过键盘的PageUp,向上箭头, 向下箭头和PageDown,可以实现相同的操作。还可以按下 Ctrl + Home 或 End,跳转到整个数据的开始或结尾。支持鼠标滚轮的操作,将鼠标移动到表格内,滚动鼠标的滚轮,表格即可滚动。

    下一次,我们将介绍通过 AJAX 来动态下载表格数据。

固定表头可以纵向滚动的html表格

设计思路: 将表格的表头与内容分别放到两个标签里,然后将其放在一个里以使表头和表格的总宽度一致,将表格内容放到一个可滚动的div()里,为每个单元格添加类来固定宽度以实现表头与内容的单元格宽度一...
  • Jjwxyz
  • Jjwxyz
  • 2016年01月27日 15:42
  • 1681

实现双向固定表头的表格

实现目标 包含横向表头和纵向表头的表格 在横向滚动轴滚动时,横向表头随之滚动,纵向表头固定不变 在纵向滚动轴滚动时,纵向表头随之滚动,横向表头固定不变 效果图 使用资源 angularjs jquer...
  • lm278858445
  • lm278858445
  • 2016年11月28日 15:57
  • 965

jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示

jquery-easyui本身没有提供列锁定/解锁的接口,并且其原有的列隐藏/显示在符合表头的情况下会出现错位,我在项目中遇到了这两个问题,在参考了网上许多解决方案后,编写了一个拓展插件,基本上解决了...
  • tianxiawudi0720
  • tianxiawudi0720
  • 2015年08月10日 17:08
  • 1836

bootstrap的table表头固定tbody滚动

栏目一 栏目二 栏目三 栏目一 栏目二 栏目三 星期一 星期二 星期三 星...
  • bbsyi
  • bbsyi
  • 2016年04月11日 21:47
  • 20599

css实现table锁定表头

在做项目中,碰到表格数据全部加载,不要分页,就需要锁定表头的业务。自己也上网搜了一些资料, 1.css+html实现 一般的思路就是两个table拼接,不过问题是上下表单可...
  • muyi8805
  • muyi8805
  • 2015年07月13日 22:13
  • 1561

表头固定内容可滚动表格的3种实现方法

有时候,我们在开发前端页面过程中,可能会用到这种表格:表头固定不动,表格内容()需要竖直滚动。 像这样的: 还有这样的: 通过研究,我大致总结了以下三种实现办法供大家参考,如果有错误之处敬请指正...
  • dragonpeng2008
  • dragonpeng2008
  • 2017年11月14日 10:43
  • 216

js 实现 table 固定表头

固定表头           #box{           height:214px;           width:500px;           overflow-y:aut...
  • zhu_nana
  • zhu_nana
  • 2016年02月15日 15:07
  • 4263

JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动

先看一张效果图 思路: 1、头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2、头部外面的div用positon: relative相对定位 ...
  • qq_37540004
  • qq_37540004
  • 2017年10月25日 21:28
  • 215

实现table表头固定 内容滚动效果

html>      head>      style type="text/css">          /*所有内容都在这个DIV内*/          div.all {           ...
  • gwpJava
  • gwpJava
  • 2013年11月21日 15:25
  • 5549

bootstrap中固定table的表头

bootstrap中固定table的表头
  • u012345283
  • u012345283
  • 2014年11月02日 01:00
  • 14870
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表头锁定可滚动的表格 - BizStruct 商业架构
举报原因:
原因补充:

(最多只允许输入30个字)