固定表头和首列,防抖节流

降低频率用节流,防抖只触发最后的一次
复制代码
<style>
    #SetLimitAdd td{
        line-height: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    #wrapper{}
    .container-fluid{
        width:1747px;/*实际显示区域*/
        overflow-x: auto;
        padding-right: auto;
        padding-left: auto;
        margin-right: auto;
        margin-left: auto;
    }
    #right_div{float: left;}
    #right_div1{width: 100%;overflow: hidden;}
    #right_divx{width: 2200px;}/*表格真实宽度*/
    #right_div2{
        /*margin-top:-20px;*/
        width:100%;
        height:500px;
        overflow-y: auto;
        overflow-x: hidden;/*内部不显示滚动条*/
    }
    #right_table1{width: 2200px;background-color: #ededed;border-bottom:1px solid #cccccc;}
    #right_table1 td{padding-top: 5px;padding-bottom: 5px;}
    #SetLimitAdd{
        /**width和max-width一起写,手机浏览器打开也能固定长度**/
        width: 2200px;/*表格真实宽度*/
        max-width: 2200px;/*表格真实宽度*/
        /*white-space:nowrap;*/
    }
</style>
<div class="basic_table" style="width: 98%; margin: 0 auto;">
    <div class="container-fluid" id="wrapper">
        <div id="right_div">
            <div id="right_div1">
                <div id="right_divx">
                    <table id="right_table1" class="basic_table_tit">
                        <tbody>
                        <tr>
                            <td style="width:50px;"><input type="checkbox" id="SetPriceInstallCheckAll" style="width:16px;height:16px;" onclick="CheckBoxGroup(this, 'SetPriceInstallCheckOne')" /></td>
                            <td style="width:150px;">配件编码</td>
                            <td style="width:150px;">配件名称</td>
                            <td style="width:150px;">原厂编码</td>
                            <td style="width:110px;">规格</td>
                            <td style="width:70px;">单位</td>
                            <td style="width:110px;">批次</td>
                            <td style="width:110px;">销售价格</td>
                            <td style="width:110px;">A价格</td>
                            <td style="width:110px;">B价格</td>
                            <td style="width:110px;">C价格</td>
                            <td style="width:110px;">成本价</td>
                            <td style="width:110px;">采购订单价</td>
                            <td style="width:110px;">原限价</td>
                            <td style="width:110px;">新限价</td>
                            <td style="width:110px;">加价率</td>
                            <td style="width:110px;">仓库</td>
                            <td style="width:110px;">子库</td>
                            <td style="width:80px;">冻结状态</td>
                            <td style="width:auto;border-right:none;">销售频次</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="right_div2">
                <table class="wgw_downtab basic_table_con basic_table_bottom" id="SetLimitAdd">
                    <tbody class="basic_table_con basic_table_bottom" id="SetLimitAddList"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
复制代码

 

复制代码
$(function () {//固定和滚动
    var right_div2 = document.getElementById("right_div2");
    right_div2.onscroll = function(){
        var right_div2_left = this.scrollLeft;
        document.getElementById("right_div1").scrollLeft = right_div2_left;
    }
    //设置右边div宽度
    document.getElementById("right_div").style.width="2200px"//表格真实宽度""+document.documentElement.clientWidth-500+"px";
    setInterval(function() {
        document.getElementById("right_div").style.width="2200px"//表格真实宽度""+document.documentElement.clientWidth-500+"px";
    }, 0);
  //直接给滚动绑事件会频繁触发
// $("#wrapper").scroll(function () {//给table外面的div滚动事件绑定一个函数 // console.log('efg') // var left = $("#wrapper").scrollLeft();//获取滚动的距离 // var trs = $("#wrapper table tr");//获取表格的所有tr // trs.each(function (i) {//对每一个tr(每一行)进行处理 // //获得每一行下面的所有的td,然后选中下标为0的,即第一列,设置position为相对定位 // //相对于父div左边的距离为滑动的距离,然后设置个背景颜色,覆盖住后面几列数据滑动到第一列下面的情况 // //如果有必要也可以设置一个z-index属性 // if(i == 0){ // $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ededed" }); // }else{ // if ((i+1) % 2 == 0) { // $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff" }); // }else{ // $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#eefcff" }); // } // } // // }); // }); }) //用防抖就行 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; var myEfficientFn = debounce(function() { console.log('防抖') var left = $("#wrapper").scrollLeft();//获取滚动的距离 var trs = $("#wrapper table tr");//获取表格的所有tr trs.each(function (i) {//对每一个tr(每一行)进行处理 //获得每一行下面的所有的td,然后选中下标为0的,即第一列,设置position为相对定位 //相对于父div左边的距离为滑动的距离,然后设置个背景颜色,覆盖住后面几列数据滑动到第一列下面的情况 //如果有必要也可以设置一个z-index属性 if(i == 0){ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ededed" });//表头全选的input }else{ if ((i+1) % 2 == 0) { $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff" });//白底 }else{ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#eefcff" });//蓝底 } } }); }, 100); // 绑定监听 $("#wrapper")[0].addEventListener('scroll', myEfficientFn); //节流的用法 function throttle(func, wait, mustRun) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); // 如果达到了规定的触发时间间隔,触发 handler if(curTime - startTime >= mustRun){ func.apply(context,args); startTime = curTime; // 没达到触发间隔,重新设定定时器 }else{ timeout = setTimeout(func, wait); } }; }; // 实际想绑定在 scroll 事件上的 handler function realFunc(){ console.log('节流') var left = $("#wrapper").scrollLeft();//获取滚动的距离 var trs = $("#wrapper table tr");//获取表格的所有tr trs.each(function (i) {//对每一个tr(每一行)进行处理 //获得每一行下面的所有的td,然后选中下标为0的,即第一列,设置position为相对定位 //相对于父div左边的距离为滑动的距离,然后设置个背景颜色,覆盖住后面几列数据滑动到第一列下面的情况 //如果有必要也可以设置一个z-index属性 if(i == 0){ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ededed" }); }else{ if ((i+1) % 2 == 0) { $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff" }); }else{ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#eefcff" }); } } }); } // 采用了节流函数 // $("#wrapper")[0].addEventListener('scroll',throttle(realFunc,100,200));
复制代码

 

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="jack">
    <title>固定表头和首列的表格</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 适应手机屏幕,防止屏幕缩放 -->
    <!--样式-->
    <link rel="stylesheet" type="text/css" href="http://www.h5al.cn/js/bootstrap.css">
</head>
<style type="text/css">
    .container-fluid{
        width:800px;/*实际显示区域*/
        overflow-x: auto;
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
    }
    #wrapper{}
    .table{margin-bottom:0}
    #right_div{ float: left;}
    #right_div1{ width: 100%;overflow: hidden;}
    #right_divx{width: 1000px;}
    #right_div2{
        width:100%;
        height:500px;
        overflow-y: auto;
        overflow-x: hidden;/*内部不显示滚动条*/
    }
    #right_table1{width: 1000px;}
    #right_table2{
        /**width和max-width一起写,手机浏览器打开也能固定长度**/
        width: 1000px;
        max-width: 1000px;
    }
    #right_table1 th{ background: #E9F8FF; text-align:center;width:100px;}
    #right_table2 td{ width:100px;text-align:center;}
</style>
<body>
<div class="container-fluid" id="wrapper">
    <div id="right_div">
        <div id="right_div1">
            <div id="right_divx">
                <table id="right_table1" class="table table-bordered">
                    <tr>
                        <th><input type="checkbox" id="CheckAll" style="width:16px;height:16px;"/></th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                        <th>我是表头</th>
                    </tr>
                </table>
            </div>
        </div>
        <div id="right_div2">
            <table id="right_table2" class="table table-bordered">
            </table>
        </div>
    </div>
</div>

<!--脚本-->
<script src="http://www.h5al.cn/js/jquery-1.11.3.min.js"></script>
<!-- <script src="http://www.h5al.cn/js/bootstrap.min.js" type="text/javascript"></script> -->
<script type="text/javascript">
//固定和滚动
var right_div2 = document.getElementById("right_div2");
right_div2.onscroll = function(){
    var right_div2_left = this.scrollLeft;
    document.getElementById("right_div1").scrollLeft = right_div2_left;
}
//设置右边div宽度
document.getElementById("right_div").style.width="1000px"//""+document.documentElement.clientWidth-500+"px";
setInterval(function() {
    document.getElementById("right_div").style.width="1000px"//""+document.documentElement.clientWidth-500+"px";
}, 0);
//绑定数据
for(var i=0;i<24;i++){
    $("#right_table2").append("<tr><td><input type='checkbox' class='CheckOne' style='width:16px;height:16px;'/></td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>");
}

//用防抖就行
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
var myEfficientFn = debounce(function() {
    //浏览器模拟移动端scrollLeft超过200监听失效
    var left = $("#wrapper").scrollLeft();//获取滚动的距离
    var trs = $("#wrapper table tr");//获取表格的所有tr
    trs.each(function (i) {//对每一个tr(每一行)进行处理
        //获得每一行下面的所有的td,然后选中下标为0的,即第一列,设置position为相对定位
        //相对于父div左边的距离为滑动的距离,然后设置个背景颜色,覆盖住后面几列数据滑动到第一列下面的情况
        //如果有必要也可以设置一个z-index属性
        if(i == 0){
            $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#E9F8FF" });//表头全选的input
        }else{
            $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff"});
            //各行变色
            // if ((i+1) % 2 == 0) {
            //     $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff" });//白底
            // }else{
            //     $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#eefcff" });//蓝底
            // }
        }
    });
}, 100);
// 绑定监听
$("#wrapper")[0].addEventListener('scroll', myEfficientFn);
</script>
</body>
</html>
复制代码

 

posted @   石头记1  阅读(4)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示