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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

jQuery實(shí)現(xiàn)鎖定頁(yè)面元素(表格列)_jquery

作者：nayi_224 ? 更新時(shí)間： 2022-04-26 編程語(yǔ)言

摘要

在拖動(dòng)滾動(dòng)條時(shí)，對(duì)頁(yè)面元素進(jìn)行橫向、縱向鎖定。

介紹

對(duì)于展現(xiàn)內(nèi)容較多的頁(yè)面，在滾動(dòng)時(shí)，我們經(jīng)常需要對(duì)一些重要的元素進(jìn)行鎖定。這些元素經(jīng)常是表格的行、列，也可能是搜索條件，或者是其他重要信息。
對(duì)于表格列的鎖定，目前主要有三種方法。

1.表格控件
2.js生成fixtable之類(lèi)填充
3.js+css

第一種，算是最簡(jiǎn)單的方法。但是用控件的缺點(diǎn)實(shí)在太多了，其中一個(gè)與本文有直接相關(guān)的缺點(diǎn)是，部分控件對(duì)多級(jí)表頭的鎖定支持的很差。

第二種，思路很清晰，但是實(shí)現(xiàn)起來(lái)非常復(fù)雜，維護(hù)成本過(guò)高。

第三種，正是本文所用的方法。目前網(wǎng)上也有多篇相關(guān)文章，但是就使用場(chǎng)景來(lái)說(shuō)太局限了，沒(méi)有對(duì)這一類(lèi)問(wèn)題進(jìn)行更高程度的抽象。
我想要的是：不只是表格，只要是想要鎖定的元素，只需要添加一個(gè)標(biāo)識(shí)，再最多額外寫(xiě)一行代碼就可以完成批量鎖定。并且內(nèi)部實(shí)現(xiàn)代碼要盡量簡(jiǎn)單。

用法

對(duì)需要縱向鎖定的元素添加樣式lock-col，橫向鎖定的添加lock-row。在nayiLock方法中傳入滾動(dòng)的div所對(duì)應(yīng)的id。

完整例子




? ? 鎖定
? ? 
? ? 







? ? 

? ? ? ? span1
? ? 

? ? 
? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 
? ? ? ? ? ? 
? ? ? ?  ? ?
? ? 
序號(hào)表頭1表頭2
1testtest
2testtest







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

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

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

? ? ? ? ? ? ? ? ? ? colspan="2"
? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? colspan="1"
? ? ? ? ? ? ? ? 
序號(hào)表頭1表頭2
1testtest
2testtest

注：對(duì)低版本ie的兼容還是沒(méi)找到j(luò)s上的直接解決方法。建議使用expression方法。

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

欄目分類(lèi)
最近更新