表格中有大量数据,几十列,至少数千行,所以需要双向滚动。大家有什么好的建议吗?我现在的做法,抛砖了:
<div> - 外层容器,负责显示滚动条
  <div> - 表头容器,负责装表头。使用绝对定位,不显示滚动条。宽度为外层容器的clientWidth,即刚好不遮挡滚动条。
    <table>...</table> - 表头。用代码控制总宽度、高度和每个单元格的宽度,使之和数据表格保持一致。
  </div>
  <table>...</table> - 数据表格,也就是真正要现实的内容。
</div>
处理流程:
1、在加载数据之后,调整表头表格,使之和数据表格的表头外观完全一致。由于表头表格使用绝对定位,会浮动在数据表格上方,完全覆盖住数据表的的表头。
2、当拖拽垂直滚动条时,表头表格不动,产生了垂直方向锁定表头的效果。
3、设置一个定时器,定时检查外层容器的scrollLeft,如果和表头容器的scrollLeft不一致,就把这个值设置给表头容器,使表头表格保持和数据表格同时横向滚动。这个做法在IE7下是没问题的,但是因为涉及到表头表格的宽度调整、容器绝对定位这些做法,跨浏览器兼容就麻烦了。请教大家有什么好的建议?有没有例子?

解决方案 »

  1.   

    楼主的做法应该是搞复杂了……http://www.cnblogs.com/jacktu/archive/2008/01/11/1035760.html
      

  2.   

    谢谢inetfuture,很好的主意,虽然和我的要求不太一样。很感谢!区别:
    1、我的页面里只有表格部分滚动,表格之外还有其他信息一直可见,所以我不能用浏览器的滚动条。
    2、这个例子没有考虑列宽度。实际上表头一旦设定了绝对定位就和内容的宽度分家了。To qianjin036a: 这个东西是用来展示用户上传的数据,不是从数据库读出来的,不存在过滤的问题。而用户不是看想自己看全部数据,只是想看看系统针对上传信息进行的校验有哪些问题。需求如此,呵呵。