这阵正好比较空闲,将以前收集的实现固定表头表格的方法在这里整理了一下。
原来想将代码直接贴在文章里,不过试了下载入很慢,所以就放在附件了。
方法1:使用CSS实现
在table外面套个div限制显示大小,同时设置表头单元格的样式为
position: relative;
top: expression(document.getElementById("div").scrollTop);
其中express是IE自带的CSS属性,可以在CSS中调用js代码。
这里通过express中的js可以让单元格总是固定在div的最上部,不随垂直滚动条滚动。
类似的-也可以设置left: expression(document.getElementById("div").scrollLeft),来冻结某一列不随水平滚动条滚动。当然若同时设置left和top样式,则这些单元格始终不会滚动。
附件中grid_css+table.html是一个基于CSS实现的行列固定的例子。
界面效果:
说明:
1、使用express来做表头固定,是最简单的,只需CSS即可,且可以支持多表头和列固定的情况
2、express是IE自带的CSS属性,在其他浏览器上都不支持;据网上的资料,express的执行效率可能有问题,鼠标移动时都会触发对应的js代码。使用需慎重!
方法2:使用js和table实现
基本思路:
1、使用js生成一个新的标题行,放在一个div中做为一个新表头。新建的表头,可以使用div内嵌span的方式来模拟;也可直接建一个新的table
2、将原table,放在另一个div中,同时删除表头
3、增加js代码,保持table在水平滚动时,新表头的div也会随着一起移动,保证表头和列的位置始终一致
整个表格被分到2个div中,一个放表头,一个放table。
附件中是grid_js+table.htm一个例子,实现了单行表头,修改一下也可以支持多行表头,在IE和FF上都可以使用:
界面效果:
方法3:使用js和div实现
其实基本思路跟方法2是一样的,只是更进一步,不在用table了,直接用div替代table来显示数据。
这样做的主要好处是,可以比较方便的把它扩展成一个Grid widget,由于不使用table了,不用再维护一套操作table DOM的代码。因为行都是用div拼成的,增加排序、列宽调整、直接编辑等功能都会方便一点。
附件中grid_js+div.html是我自己写的例子,使用JQUERY。
这个表格分为4个div,分别表示标题行、数据表格、水平滚动条、垂直滚动条,里面除了实现表头固定,还实现了用div模拟滚动条的功能
界面效果: