表格中有大量数据,几十列,至少数千行,所以需要双向滚动。大家有什么好的建议吗?我现在的做法,抛砖了:
<div> - 外层容器,负责显示滚动条
<div> - 表头容器,负责装表头。使用绝对定位,不显示滚动条。宽度为外层容器的clientWidth,即刚好不遮挡滚动条。
<table>...</table> - 表头。用代码控制总宽度、高度和每个单元格的宽度,使之和数据表格保持一致。
</div>
<table>...</table> - 数据表格,也就是真正要现实的内容。
</div>
处理流程:
1、在加载数据之后,调整表头表格,使之和数据表格的表头外观完全一致。由于表头表格使用绝对定位,会浮动在数据表格上方,完全覆盖住数据表的的表头。
2、当拖拽垂直滚动条时,表头表格不动,产生了垂直方向锁定表头的效果。
3、设置一个定时器,定时检查外层容器的scrollLeft,如果和表头容器的scrollLeft不一致,就把这个值设置给表头容器,使表头表格保持和数据表格同时横向滚动。这个做法在IE7下是没问题的,但是因为涉及到表头表格的宽度调整、容器绝对定位这些做法,跨浏览器兼容就麻烦了。请教大家有什么好的建议?有没有例子?
<div> - 外层容器,负责显示滚动条
<div> - 表头容器,负责装表头。使用绝对定位,不显示滚动条。宽度为外层容器的clientWidth,即刚好不遮挡滚动条。
<table>...</table> - 表头。用代码控制总宽度、高度和每个单元格的宽度,使之和数据表格保持一致。
</div>
<table>...</table> - 数据表格,也就是真正要现实的内容。
</div>
处理流程:
1、在加载数据之后,调整表头表格,使之和数据表格的表头外观完全一致。由于表头表格使用绝对定位,会浮动在数据表格上方,完全覆盖住数据表的的表头。
2、当拖拽垂直滚动条时,表头表格不动,产生了垂直方向锁定表头的效果。
3、设置一个定时器,定时检查外层容器的scrollLeft,如果和表头容器的scrollLeft不一致,就把这个值设置给表头容器,使表头表格保持和数据表格同时横向滚动。这个做法在IE7下是没问题的,但是因为涉及到表头表格的宽度调整、容器绝对定位这些做法,跨浏览器兼容就麻烦了。请教大家有什么好的建议?有没有例子?
解决方案 »
- 求助,关于js滚动图片
- 想实现51job简历添加-工作经历添加(多条工作经历添加)效果
- 请大家帮忙解下js,直接用别人js页面正常,将js下载来用,页面出错
- 问题!
- 在文本框中使用日历控件(JS版)
- 请问用什么方式才能在javascript语言中调用动态链接库?
- 如何实现当第一次点击F4键时触发一个事件,再一次点击时触发另外一个事件。
- 用CSS怎么控制按钮button的大小!!!写在一个CSS文件里面来实现????
- 求EasyUI Mobile版的Demo下载地址
- encodeuricomponent 包含escape的用法吗
- jquery 、iframe问题
- 如何控制ExtJs Toolbar内部组件的位置?
1、我的页面里只有表格部分滚动,表格之外还有其他信息一直可见,所以我不能用浏览器的滚动条。
2、这个例子没有考虑列宽度。实际上表头一旦设定了绝对定位就和内容的宽度分家了。To qianjin036a: 这个东西是用来展示用户上传的数据,不是从数据库读出来的,不存在过滤的问题。而用户不是看想自己看全部数据,只是想看看系统针对上传信息进行的校验有哪些问题。需求如此,呵呵。