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