jQuery实现锁定页面元素(表格列)
摘要
在拖动滚动条时,对页面元素进行横向、纵向锁定。
介绍
对于展现内容较多的页面,在滚动时,我们经常需要对一些重要的元素进行锁定。这些元素经常是表格的行、列,也可能是搜索条件,或者是其他重要信息。
对于表格列的锁定,目前主要有三种方法。
1.表格控件
2.js生成fixtable之类填充
3.js+css
第一种,算是最简单的方法。但是用控件的缺点实在太多了,其中一个与本文有直接相关的缺点是,部分控件对多级表头的锁定支持的很差。
第二种,思路很清晰,但是实现起来非常复杂,维护成本过高。
第三种,正是本文所用的方法。目前网上也有多篇相关文章,但是就使用场景来说太局限了,没有对这一类问题进行更高程度的抽象。
我想要的是:不只是表格,只要是想要锁定的元素,只需要添加一个标识,再最多额外写一行代码就可以完成批量锁定。并且内部实现代码要尽量简单。
用法
对需要纵向锁定的元素添加样式lock-col,横向锁定的添加lock-row。在nayiLock方法中传入滚动的div所对应的id。
完整例子
锁定 - 锐客网 table td, th{text-align: center; border:#dee9ef 1px solid; }span1
序号 表头1 表头2 1 test test 2 test test
colspan="2" colspan="1" 序号 表头1 表头2 1 test test 2 test test
【jQuery实现锁定页面元素(表格列)】注:对低版本ie的兼容还是没找到js上的直接解决方法。建议使用expression方法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- js实现移动端简易滑动表格
- 揭秘2022冬奥黑科技,阿里云视频云「Cloud ME」如何实现全息会面()
- Spring|Spring MVC如何实现接口Controller定义控制器
- 基于Mediapipe+Opencv实现手势检测功能
- SpringBoot整合RedisTemplate实现缓存信息监控的步骤
- SpringBoot实现redis缓存菜单列表
- netty系列之:channel|netty系列之:channel,ServerChannel和netty中的实现
- Spring|SpringBoot整合Redis实现缓存(自动缓存 + 手动aop缓存)
- 通过Dapr实现一个简单的基于.net的微服务电商系统(二十)——Saga框架实现思路分享
- .NET|.NET Core使用flyfire.CustomSerialPort实现Windows/Linux跨平台串口通讯