当前位置: 首页 > news >正文

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();

相关文章:

  • 论文浅尝 | GPT-RE:基于大语言模型针对关系抽取的上下文学习
  • Json Web Token(JWT) 快速入门
  • [项目设计]基于websocket实现网络对战五子棋
  • Python使用whisper实现语音识别(ASR)
  • 【鸿蒙系统】 ---Harmony 鸿蒙编译构建指导(一)
  • 【Python】使用selenium对Poe批量模拟注册脚本
  • Docker使用之java项目工程的部署
  • Linux操作系统-汇编LED驱动程序基础
  • FX-数组的使用
  • 【OCR】OCR开源文字识别工具
  • 力扣大厂热门面试算法题 33-35
  • [CISCN2019 华北赛区 Day1 Web5]CyberPunk --不会编程的崽
  • OPTIONS请求(跨域预检查)
  • Android 12.0 系统修改usb连接电脑mtp和PTP的显示名称
  • [概率论]期中考AB卷题目答案及详解
  • 【Leetcode】101. 对称二叉树
  • [LeetCode] Wiggle Sort
  • “大数据应用场景”之隔壁老王(连载四)
  • Apache Spark Streaming 使用实例
  • Date型的使用
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • HTTP中的ETag在移动客户端的应用
  • Java超时控制的实现
  • Python 基础起步 (十) 什么叫函数?
  • Python利用正则抓取网页内容保存到本地
  • 当SetTimeout遇到了字符串
  • 给初学者:JavaScript 中数组操作注意点
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 前端
  • 前端性能优化——回流与重绘
  • 前端自动化解决方案
  • 世界编程语言排行榜2008年06月(ActionScript 挺进20强)
  • 数组的操作
  • 学习HTTP相关知识笔记
  • 与 ConTeXt MkIV 官方文档的接驳
  • CMake 入门1/5:基于阿里云 ECS搭建体验环境
  • python最赚钱的4个方向,你最心动的是哪个?
  • SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解 ...
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • ###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
  • #{}和${}的区别是什么 -- java面试
  • #经典论文 异质山坡的物理模型 2 有效导水率
  • (C语言)输入一个序列,判断是否为奇偶交叉数
  • (八)光盘的挂载与解挂、挂载CentOS镜像、rpm安装软件详细学习笔记
  • (机器学习-深度学习快速入门)第一章第一节:Python环境和数据分析
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (原)Matlab的svmtrain和svmclassify
  • ***检测工具之RKHunter AIDE
  • .htaccess 强制https 单独排除某个目录
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .Net MVC4 上传大文件,并保存表单
  • .NET 设计模式—简单工厂(Simple Factory Pattern)
  • .Net(C#)常用转换byte转uint32、byte转float等