表头锁定可滚动的表格 - 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
  • 1193

Table的思索(二):表头固定而内容滚动的表格

产品要求表格的表头固定,而内容在超出table的高度后,还能自由滚动,难度较高,本文尝试了几种常用方法,但都经历了失败,最后给出了一种可行的解决方案。
  • yiifaa
  • yiifaa
  • 2016-08-03 16:14
  • 2987

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

更改润乾报表锁定表头时滚动条样式

润乾报表在页面端展现时,可生成滚动条锁定表头,通过拖拽滚动条查看相应数据,客户在使用时通常是将报表集成到自己的页面中,这样就要求生成滚动条的样式要和客户的显示风格保持一致,需要能定义润乾所生成的滚动条...

ASP.net表格GridView表头显示表头、滚动条

ASP.net表头显示表头、滚动条

如何更改润乾报表锁定表头时的滚动条样式

润乾V4 润乾报表 锁定表头 滚动条样式

完美兼容IE_Opera_Firefox等主流浏览器的锁定表格的 表头以及表头列

锁定 表格的表头 和 列   终于 被我 写出来了,哇哈哈~~~~~~  , 心情大好....   共享下 吧。   希望 看到的该文的 时候给予评价, 俗话说 ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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