BizStruct 商业架构

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

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

表头锁定可滚动的表格 - 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 来动态下载表格数据。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭