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

更新時(shí)間：2022年02月22日 12:09:25 作者：nayi_224

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鎖定頁面元素，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

摘要

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

介紹

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

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

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

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

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

用法

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

完整例子

<!DOCTYPE>
<html>
<head>
? ? <title>鎖定</title>
? ? <meta http-equiv="X-UA-Compatible" charset="utf-8"/>
? ? <script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">

table td, th{
? ? text-align: center;
? ? border:#dee9ef 1px solid;
}

</style>
<script>?
jQuery(function(){
? ? nayiLock("aDiv");
? ? //支持多級(jí)表頭的鎖定
? ? nayiLock("bDiv");

? ? //支持對(duì)多個(gè)div的鎖定
})?
//scrollDivId ? 滾動(dòng)的div的id
function nayiLock(scrollDivId){
? ? jQuery("#" + scrollDivId).scroll(function(){
? ? ? ? var left = jQuery("#" + scrollDivId).scrollLeft();
? ? ? ? jQuery(this).find(".lock-col").each(function(){
? ? ? ? ? ? jQuery(this).css({"position":"relative","left":left,"background-color":"white","z-index":jQuery(this).hasClass("lock-row")?20:10});
? ? ? ? });

? ? ? ? var top = jQuery("#" + scrollDivId).scrollTop();
? ? ? ? jQuery(this).find(".lock-row").each(function(){
? ? ? ? ? ? jQuery(this).css({"position":"relative","top":top,"background-color":"white","z-index":jQuery(this).hasClass("lock-col")?20:9});
? ? ? ? });
? ? });
}


</script>
</head>
<body id="myBody">

<div id="aDiv" style="width:600px;height:200px;overflow:auto;">
? ? <div class="lock-row lock-col" >
? ? ? ? <span id="span1" >span1</span>
? ? </div>
? ? <table id="table1" style="width:800px;height:250px;" >
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th id="testTh" class="lock-col lock-row">序號(hào)</th>
? ? ? ? ? ? ? ? <th class=" lock-row">表頭1</th>
? ? ? ? ? ? ? ? <th class="lock-row">表頭2</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">1</td>
? ? ? ? ? ? ? ? <td class="">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">2</td>
? ? ? ? ? ? ? ? <td class="">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody> ? ?
? ? </table>
</div>

<div id="bDiv" style="width:600px;height:100px;overflow:auto;">

? ? <table id="table1" style="width:800px;height:150px;">
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th colspan="2" class="lock-col lock-row">
? ? ? ? ? ? ? ? ? ? colspan="2"
? ? ? ? ? ? ? ? </th>
? ? ? ? ? ? ? ? <th class="lock-row">
? ? ? ? ? ? ? ? ? ? colspan="1"
? ? ? ? ? ? ? ? </th>
? ? ? ? ? ? </tr>

? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th id="testTh" class="lock-col lock-row">序號(hào)</th>
? ? ? ? ? ? ? ? <th class="lock-col lock-row">表頭1</th>
? ? ? ? ? ? ? ? <th class="lock-row">表頭2</th>

? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">1</td>
? ? ? ? ? ? ? ? <td class="lock-col">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">2</td>
? ? ? ? ? ? ? ? <td class="lock-col">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody> ? ?
? ? </table>
</div>

</body>
</html>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: