改造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: [
                []
            ],
        })

补充

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

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值