让layui table固定列也能监听滚动的方法介绍

1. 什么是layui table

layui table 是一种基于layui框架的表格组件，它提供了一系列的功能，比如数据排序、数据批量操作、数据筛选等等。

与其他的表格组件相比较，layui table 风格简洁，易于定制，拿来即用，而且自带了流畅的滚动条效果。

2. layui table 固定列的实现

layui table 固定列指的是在表格过宽时，为了方便用户查看，在表格左侧或右侧固定一定数量的列。在 layui table 中，我们可以通过设置 fixed 属性来实现固定列的功能。

<table id="demo" lay-filter="test"></table>
<script>
    layui.use('table', function(){
        var table = layui.table;
  
        table.render({
            elem: '#demo',
            url:'/demo/table/user/',
            cols: [[
                {type:'checkbox'},
                {field:'username',  title: '用户名'},
                {field:'email', title: '邮箱'},
                {field:'sign', title: '签名'},
                {field:'sex',  title: '性别', width:80, align:'center',templet:function(d){
                    return d.sex == 1 ? '男' : '女';
                }},
                {field:'city', title: '城市'},
                {field:'experience', title: '积分', sort: true},
                {field:'ip', title: 'IP'},
                {field:'logins', title: '登入次数', sort: true},
                {field:'joinTime', title: '加入时间', sort: true},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]],
            page:true
        });  
    });
</script>

在上述代码中，我们设置了一个名为 demo 的表格，并且通过设置 cols 属性来定义表格的列。在第十一列，我们通过设置 fixed 属性为 right 来固定右侧的操作列。

3. layui table 对滚动的监听

如果表格数据过多，单纯设置固定列可能会导致表格的宽度过宽，用户需要滚动才能看到完整的表格。此时，我们可以利用 layui 的事件监听机制来监听表格的滚动事件。

<table id="demo" lay-filter="test"></table>
<script>
    layui.use('table', function(){
        var table = layui.table;
  
        table.render({
            elem: '#demo',
            url:'/demo/table/user/',
            cols: [[
                {type:'checkbox'},
                {field:'username',  title: '用户名'},
                {field:'email', title: '邮箱'},
                {field:'sign', title: '签名'},
                {field:'sex',  title: '性别', width:80, align:'center',templet:function(d){
                    return d.sex == 1 ? '男' : '女';
                }},
                {field:'city', title: '城市'},
                {field:'experience', title: '积分', sort: true,
                    templet:function(d){
                        if(d.experience > 100){
                            return ''+ d.experience +''
                        }else{
                            return d.experience
                        }
                    }
                 },
                {field:'ip', title: 'IP'},
                {field:'logins', title: '登入次数', sort: true},
                {field:'joinTime', title: '加入时间', sort: true},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]],
            page:true,
            done:function(){
                //监听滚动事件
                var oldScrollTop=0;
                $('.layui-table-body.layui-table-main').on('scroll',function(){
                    var currScrollTop = this.scrollTop;
                    //向上滑动
                    if(currScrollTop
                        console.log('向上滑动');
                    }
                    //向下滑动
                    else if(currScrollTop>oldScrollTop){
                        console.log('向下滑动');
                    }
                    oldScrollTop = currScrollTop;
                });
            }
        });  
    });
</script>

在上述代码中，我们通过监听 layui-table-body.layui-table-main 元素的 scroll 事件来监听表格的滚动。当滚动条向上或向下滑动时，控制台就会输出向上或向下滑动。

4. 结论

通过以上的代码实现，我们可以顺利的将 layui table 固定列与滚动事件相结合，给用户带来更好的使用体验。通过监听滚动事件，我们可以做出更多的交互效果，例如滚动加载等等。