layui 数据表格 自动定位新增行位置

由于数据表格新增行后没有到新增到当前位置 继续增加的需求:

因为自己是新增行后到最后一行的 所以 就定位到最后一行 并且 高亮 

高亮颜色浅 可自行更改 

整理了一下 可根据 情况 修改 

// 初始化滚动条位置变量
let tableScroll = {scrollTob: 0,scrollLeft: 0,
};// 定义滚动到指定位置的函数
function scrollToAndHighlight(id) {let rows = layui.table.cache.test;for (let i = 0; i < rows.length; i++) {if (rows[i].day == id) {let j = rows[i].LAY_TABLE_INDEX;$('tbody > tr').eq(j).css('background', '#e5e5e5'); // 高亮显示指定行let cellHtml = $('tbody > tr').eq(j);$(".layui-table-main").animate({scrollTop: cellHtml.offset().top - $(".layui-table-main").offset().top + $(".layui-table-main").scrollTop()}, 200); // 滚动到指定行return; // 找到并处理完后退出循环}}
}// 重载表格的done回调函数,用于保持滚动条位置
done: function (res, curr, count) {// 重载表格---保持滚动条位置$('.layui-table-body').scrollTop(tableScroll.scrollTob);$('.layui-table-body').scrollLeft(tableScroll.scrollLeft);tableScroll.scrollTob = 0;tableScroll.scrollLeft = 0;
},// 自定义函数,用于重载表格并处理滚动条位置
function fn() {// 重载表格---保持滚动条位置var scrollTop = ($('.layui-table-body').length > 1) ? $('.layui-table-body')[0].scrollTop : $('.layui-table-body').scrollTop;var scrollLeft = ($('.layui-table-body').length > 1) ? $('.layui-table-body')[0].scrollLeft : $('.layui-table-body').scrollLeft;tableScroll.scrollTob = scrollTop == 0 ? tableScroll.scrollTob : scrollTop;tableScroll.scrollLeft = scrollLeft;// 假设这里有你想要高亮显示的idlet highlightId = 'yourDesiredId';scrollToAndHighlight(highlightId);layui.table.reload('test', { data: productList }); // 重载表格form.render(); // 刷新表单
}// 调用fn函数执行重载操作
fn();

如果页面有多个表格 给前面加上当前的 id  因为自己遇到了每次都定位缺行 最后发现是 由于另外一个表格数据的关系 提示一下 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/8946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Node.js工程师养成计划】之使用Node连接MongoDB进行增删改查

一、Node连接MongoDB mongodb npm install mongodb # or ... yarn add mongodbdemo: const { MongoClient } require(mongodb); // or as an es module: // import { MongoClient } from mongodb// Connection URL const url mongodb://localhost:27017; const client ne…

PyQt程序的打包

Qt hello - 专注于Qt的技术分享平台 记录下PyQt程序的打包。 一&#xff0c;安装 pip3 install PyInstaller 二&#xff0c;打包 pyinstaller -w -n app app.py 根据需要选择打包参数&#xff0c;例如&#xff1a;-F表示生成单文件模式&#xff0c;即只有一个可执行文件…

windows驱动开发-内核调度(二)

这篇文档记录剩下的内核调度对象。 信号灯 任何驱动程序都可以使用信号量对象在其驱动程序创建的线程和其他驱动程序例程之间同步操作。 例如&#xff0c;当驱动程序没有未完成的 I/O 请求时&#xff0c;驱动程序专用线程可能会将自身置于等待状态&#xff0c;并且驱动程序的…

javaWeb入门(自用)

1. vue学习 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://unpkg.com/vue2"></script> </head> <body><div id"…

Python 使用 WeChatFerry 搭建部署微信机器人详细教程(更新中)

下载安装 wcferry 库 通过 pip 快速安装 wcferry pip install wcferry免责声明&#xff1a;仅供学习和技术研究使用&#xff0c;不得用于任何商业或非法行为&#xff0c;否则后果自负。 基本原理 当微信收到消息时&#xff0c;抢在微信处理&#xff08;显示到页面&#xff0…

C++与java回调函数用法区别实例(二百七十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Netty 实现dubbo rpc

一、RPC 的基本介绍 RPC (Remote Procedure Call) 远程过程调用&#xff0c;是一个计算机通信协议。该协议允许运行于一台计算机的程序调用另一台计算机的子程序&#xff0c;而程序员无需额外的为这个交互编程。也就是说可以达到两个或者多个应用程序部署在不同的服务器上&…

HOOPS Visualize:工业级3D可视化SDK,打造移动端和PC端工程应用程序

HOOPS Visualize是一种高性能的软件开发工具包&#xff08;SDK&#xff09;&#xff0c;旨在帮助开发人员轻松构建和集成高质量的3D可视化功能。这是一种全功能的&#xff0c;以工程为重点的场景图技术&#xff0c;我们称为Core Graphics。Core Graphics可集成到一个框架中&…

webpack从零到1 构建 vue3

为什么要手写webpack 不用cli &#xff08;无的放矢&#xff09;并不是 其实是为了加深我们对webpack 的了解方便以后灵活运用webpack 的技术 初始化项目结构&#xff08;跟cli 结构保持一致&#xff09; 新建 public src 等文件夹npm init -y 创建package.json文件tsc --init…

opencv基础篇 ——(十一)常用照片处理函数

改善图像的亮度(illuminationChange) 用于改善光照条件不佳导致的图像对比度低下或局部过暗/过亮的问题。该函数通过模拟全局和局部光照变化&#xff0c;旨在提高图像的整体视觉质量&#xff0c;特别是在低光照条件下&#xff0c;使得图像中的重要细节更加清晰可见。 函数原型…

IDEA Maven项目,控制台出现乱码的问题

前言 使用idea进行maven项目的编译时&#xff0c;控制台输出中文的时候出现乱码的情况。 通常出现这样的问题&#xff0c;都是因为编码格式不一样导致的。既然是maven出的问题&#xff0c;我们在idea中查找下看可以如何设置文件编码。 第一种方式 在pom.xml文件中&#xff…

nginx--系统参数优化telenct

系统参数 在生产环境中&#xff0c;根据自己的需求在/etc/sysctl.conf来更改内核参数 net.ipv4.ip_nonlocal_bind 1 允许非本地IP地址socket监听 net.ipv4.ip_forward 1 开启IPv4转发 net.ipv4.tcp_timestamps 0 是否开启数据包时间戳 net.ipv4.tcp_tw_reuse 0 端⼝口复⽤…

企业外贸邮箱有哪些?国内五大外贸邮箱排行榜

外贸公司在进行跨国业务的时候&#xff0c;需要一个稳定安全的企业邮箱。国内的企业外贸邮箱提供商有很多&#xff0c;目前排行在前五的有Zoho Mail企业邮箱、阿里企业邮箱、网易企业邮箱、腾讯企业邮箱、新浪企业邮箱&#xff0c;今天我们就来详细了解下这些邮箱产品。 一、Z…

【yolov8 项目打包】pyinstaller 打包pyQt5 界面为exe

创建一篇博客文章&#xff0c;介绍如何使用PyInstaller将PyQt5界面打包为exe文件&#xff0c;并且处理与YOLOv8模型相关的文件&#xff0c;可以按照以下结构进行&#xff1a; 标题&#xff1a;使用PyInstaller将PyQt5界面与YOLOv8模型打包为Windows可执行文件 引言 在机器学习…

Unity Material(材质)、Texture(纹理)、Shader(着色器)简介

文章目录 一、概念二、Rendering Mode三、Main Maps三、参考文章 一、概念 Material(材质)&#xff1a;物体的“色彩”、“纹理”、“光滑度”、“透明度”、“反射率”、“折射率”、“发光度”等&#xff0c;材质的本质是shader的实例(载体)Texture(贴图)&#xff1a;附件到…

Python通过定义类实现增删改查(期末考试)

python高级编程期末测试 别看我挣的少&#xff0c;但是我省的多&#xff0c;昨天法拉利又省下两百多万。 一、通过创建自己类来实现增删改查 我们已经利用模型实现单表的增删改查了 现在 我们不想使用模型来操作数据库 我们可以自己定义模型 那么 如何通过自己创建的类实现增…

计算机SCI期刊,IF=9.657,1区TOP,2周内出版!

一、期刊名称 Neural Networks 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;计算机科学 影响因子&#xff1a;7.8 中科院分区&#xff1a;1区TOP 出版方式&#xff1a;订阅模式/开放出版 版面费&#xff1a;选择开放出版需支付$3350 三、期刊简介 神…

美国原装二手keysight86122c安捷伦86122C波长计

是德KEYSIGHT 86122C 波长计 主要功能和规格 特征&#xff1a; 增强型&#xff0c;稳定的HeNe参考激光器&#xff0c;使用寿命更长 包括五年保修&#xff0c;涵盖整个仪器&#xff0c;所有零件 绝对波长精度&#xff1a;0.2 ppm 差分波长精度&#xff1a;0.15 ppm 不到0.…

Springboot+vue项目影城管理系统

摘 要 本论文主要论述了如何使用JAVA语言开发一个影城管理系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述影城管理系统的当前背景以及系统开发的目的&…

正点原子Linux学习笔记(六)在 LCD 上显示 jpeg 图像

在 LCD 上显示 jpeg 图像 20.1 JPEG 简介20.2 libjpeg 简介20.3 libjpeg 移植下载源码包编译源码安装目录下的文件夹介绍移植到开发板 20.4 libjpeg 使用说明错误处理创建解码对象设置数据源读取 jpeg 文件的头信息设置解码处理参数开始解码读取数据结束解码释放/销毁解码对象 …