layui table列表重载后保持进度条位置不变

使用layui的table表格组件时,当我们操作了某行的修改后,刷新了页面,进度条则跳回到最上面。

除了layui高版本应该内置有方法解决了此问题,但是低版本需要另外想办法解决。

具体解决方式如下:

1.在编辑操作成功前,即刷新页面前要获取到当前列表滚动的位置并记录下来。

2.列表重新刷新渲染完成后将滚动条设置滚动到上次记录的位置

做法:

1.定义全局变量 保存滚动条位置

var topScroll = 0;

2.table.render内有列表渲染完成后的回调 done

所以在done的回调函数最后写入 $(".layui-table-main").scrollTop(topScroll) 即列表刷新后滚动条指定滚动到上次位置

3.刷新前记录获取滚动条位置,并保存到全局变量中。done回调中,我们一般会调用table.on('tool(dataTable)', function (obj) {} 用来监控每行进行的编辑或其他操作,所以在点击这些操作时,便记录操作行的滚动位置

topScroll = $('.dataTable').next('.layui-table-view').find('.layui-table-body').scrollTop();

相关推荐
Json____1 分钟前
uni-app-数码购物商城h5手机端-前端静态网页
前端·uni-app·商城
k***85842 分钟前
删除文件夹,被提示“需要来自 TrustedInstaller 的权限。。。”的解决方案
android·前端·后端
●VON5 分钟前
逐行解读 Flutter 默认模板:从 `main()` 到计数器 App
前端·学习·flutter·openharmony
张风捷特烈5 分钟前
Flutter TolyUI 框架#09 | tolyui_text 轻量高亮文本
前端·flutter·ui kit
艾小码8 分钟前
还在为Vue 3响应式性能头疼?这4个进阶API让你开发效率翻倍!
前端·javascript·vue.js
d***9353 小时前
springboot3.X 无法解析parameter参数问题
android·前端·后端
n***84074 小时前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
likuolei8 小时前
XSL-FO 软件
java·开发语言·前端·数据库
正一品程序员8 小时前
vue项目引入GoogleMap API进行网格区域圈选
前端·javascript·vue.js
j***89468 小时前
spring-boot-starter和spring-boot-starter-web的关联
前端