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

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


http://www.kler.cn/a/271615.html

相关文章:

  • 【懒删除堆】力扣2349. 设计数字容器系统
  • 爬虫基础(三)Session和Cookie讲解
  • 如何将DeepSeek部署到本地电脑
  • 春节期间,景区和酒店如何合理用工?
  • 一文了解性能优化的方法
  • Vue3 结合 .NetCore WebApi 前后端分离跨域请求简易实例
  • npm下载慢换国内镜像地址
  • C++ 虚函数表
  • STM32 Simulink 自动代码生成电机控制——霍尔有感六步方波仿真到开发板运行
  • 项目需求:实现 PDF 添加水印,这五种方案送上!
  • 关于分布式微服务数据源加密配置以及取巧方案(含自定义加密配置)
  • ChatGPT编程—实现小工具软件(批量替换文本、批量处理图像文件)
  • linux最佳入门(笔记)
  • 【TB作品】MSP430,单片机,Proteus仿真,单片机通信,串口通信
  • 计算机设计大赛 题目:基于机器视觉的图像矫正 (以车牌识别为例) - 图像畸变校正
  • 基于MATLAB的OFDM系统实现
  • 卫生间设计黄金法则!贴心小技巧,让你的卫生间瞬间变宽敞!福州中宅装饰,福州装修
  • Session,Cookie,Token详解,初步认识web程序的安全性
  • HTTP和HTTPS的区别,HTTPS加密原理是?
  • 智能合约概述
  • 游戏服务端配置“热更”及“秒启动”终极方案(golang/ygluu/卢益贵)
  • Maya自定义工具架
  • 服务器硬件基础知识
  • Unix环境高级编程-学习-05-TCP/IP协议与套接字
  • 【正则表达式】正则表达式里使用变量
  • Unity类银河恶魔城学习记录10-13 p101 Improve aliment - shock源代码