日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jQuery實現鎖定頁面元素(表格列)_jquery

作者：nayi_224 ? 更新時間： 2022-04-26 編程語言

摘要

在拖動滾動條時，對頁面元素進行橫向、縱向鎖定。

介紹

對于展現內容較多的頁面，在滾動時，我們經常需要對一些重要的元素進行鎖定。這些元素經常是表格的行、列，也可能是搜索條件，或者是其他重要信息。
對于表格列的鎖定，目前主要有三種方法。

1.表格控件
2.js生成fixtable之類填充
3.js+css

第一種，算是最簡單的方法。但是用控件的缺點實在太多了，其中一個與本文有直接相關的缺點是，部分控件對多級表頭的鎖定支持的很差。

第二種，思路很清晰，但是實現起來非常復雜，維護成本過高。

第三種，正是本文所用的方法。目前網上也有多篇相關文章，但是就使用場景來說太局限了，沒有對這一類問題進行更高程度的抽象。
我想要的是：不只是表格，只要是想要鎖定的元素，只需要添加一個標識，再最多額外寫一行代碼就可以完成批量鎖定。并且內部實現代碼要盡量簡單。

用法

對需要縱向鎖定的元素添加樣式lock-col，橫向鎖定的添加lock-row。在nayiLock方法中傳入滾動的div所對應的id。

完整例子




? ? 鎖定
? ? 
? ? 







? ? 

? ? ? ? span1
? ? 

? ? 
? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ?  ? ?
? ? 
序號表頭1表頭2
1testtest
2testtest







? ? 
? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 

? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 

? ? ? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ?  ? ?
? ? 

? ? ? ? ? ? ? ? ? ? colspan="2"
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? colspan="1"
? ? ? ? ? ? ? ? 
序號表頭1表頭2
1testtest
2testtest

注：對低版本ie的兼容還是沒找到js上的直接解決方法。建議使用expression方法。

原文鏈接：https://blog.csdn.net/nayi_224/article/details/79972264

欄目分類
最近更新