当前位置:Gxlcms > JavaScript > jQuery实现冻结表格行和列_jquery

jQuery实现冻结表格行和列_jquery

时间:2021-07-01 10:21:17 帮助过:13人阅读

客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行、列进行冻结。

实现原理:

创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆。例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格的上层。同理,需要列冻结时,创建存放冻结列表格的div,并放置在数据表格的上层。如果需要行列都冻结时,则除了创建冻结行、冻结列表格的div,还需要创建左上角的固定行列表格的div,并放置在所有div的最上层。
处理表格的滚动事件,在表格横向或者纵向滚动时,同时让相应的冻结行和冻结列也同步滚动。
处理html的resize事件,同步修改表格的滚动区域宽度和高度

代码如下:

使用时,只要在table元素设置freezeRowNum和freezeColumnNum属性值,即可实现冻结效果

代码如下:

...

以上所述就是本文的全部内容了,希望大家能够喜欢。

人气教程排行