jQuery锁定页面元素（表格列）

电玩女神 2021-09-26 15:22 309阅读 0赞

## 摘要 ##

在拖动滚动条时，对页面元素进行横向、纵向锁定。

## 介绍 ##

对于展现内容较多的页面，在滚动时，我们经常需要对一些重要的元素进行锁定。这些元素经常是表格的行、列，也可能是搜索条件，或者是其他重要信息。  
对于表格列的锁定，目前主要有三种方法。

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

第一种，算是最简单的方法。但是用控件的缺点实在太多了，其中一个与本文有直接相关的缺点是，部分控件对多级表头的锁定支持的很差。

第二种，思路很清晰，但是实现起来非常复杂，维护成本过高。

第三种，正是本文所用的方法。目前网上也有多篇相关文章，但是就使用场景来说太局限了，没有对这一类问题进行更高程度的抽象。  
我想要的是：不只是表格，只要是想要锁定的元素，只需要添加一个标识，再最多额外写一行代码就可以完成批量锁定。并且内部实现代码要尽量简单。

## 用法 ##

对需要纵向锁定的元素添加样式lock-col，横向锁定的添加lock-row。在nayiLock方法中传入滚动的div所对应的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"); //支持多级表头的锁定 nayiLock("bDiv"); //支持对多个div的锁定 }) //scrollDivId 滚动的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">序号</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">序号</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>

注：对低版本ie的兼容还是没找到js上的直接解决方法。建议使用expression方法。