改造layui table.js 使用table.reload()后 保持上次滚动条位置

项目场景:

今天客户提出个需求 在系统表格里面 添加新数据后 因为调用 table.reload() 会重载表单 然后滚动条 就变成最开始 前面,需要添加数据后保存滚动条位置不变


问题描述

layui重载表格后会把滚动条重置到0


解决方案:

参考资料:https://www.cnblogs.com/shazixu/p/11775753.html

参考上面自己改了下源码,实现效果,直接修改layui table.js的源码

    //表格重载 大概2090行左右 自己搜索下
    table.reload = function(id, options){
    
    
        var config = getThisTableConfig(id); //获取当前实例配置项
        if(!config) return;

        var that = thisTable.that[id];

        var scrollTop = 0;
        var scrollLeft = 0;

        //如果开启自动滚动上次加载位置
        if (config.) {
    
    
            scrollTop = that.layMain.scrollTop();
            scrollLeft = that.layMain.scrollLeft();
        }

        that.reload(options);

        if (config.autoRolling) {
    
    
            // 滚动到之前的位置
            that.layBody.scrollTop(scrollTop);
            that.layMain.scrollLeft(scrollLeft);
        }

        return thisTable.call(that);
    };

调用

 var insTb = common.table.init({
    
    
            elem: '#itemTable',
            data: msgDataList,
            totalRow: true,
            page: false,
            height: '350px;',
            autoRolling: true,  //控制是否开启自动滚动到上次位置
            limit: 9999,
            autoColumnWidth: {
    
    
                init: false
            },
            id: 'itemTable',
            cols: [
                []
            ],
        })

补充

还有个就是。表格重载 会闪动下 用户体验效果不好。。客户也想修改 但是没找到好方法。。先放着

猜你喜欢

转载自blog.csdn.net/u014287572/article/details/125051393