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

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  因为自己遇到了每次都定位缺行 最后发现是 由于另外一个表格数据的关系 提示一下 

相关文章:

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

由于数据表格新增行后没有到新增到当前位置 继续增加的需求&#xff1a; 因为自己是新增行后到最后一行的 所以 就定位到最后一行 并且 高亮 高亮颜色浅 可自行更改 整理了一下 可根据 情况 修改 // 初始化滚动条位置变量 let tableScroll {scrollTob: 0,scrollLeft: 0,…...

window10下安装ubuntu系统以及docker使用

window10下安装ubuntu系统以及docker使用 1. 启用适用于Linux的Windwos子系统2.下载Linux内核更新包3.将 WSL 2 设置为默认版本4.安装Ubuntu<br />直接去Microsoft store里面直接搜索Ubuntu进行安装。5.可能出现的问题1.win10启动ubuntu报错 参考的对象类型不支持尝试的操…...

Netty核心组件介绍

Netty是一款用于创建高性能网络应用程序的高级框架。Netty的核心组件如下&#xff1a; Channel回调Future事件和ChannelHander Channel channel是Java NIO的一个基本构造。可以把Channel看作是传入或传出数据的载体。它可以被打开或关闭&#xff0c;连接或断开连接。 回调 …...

代码审计平台sonarqube的安装及使用

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、使用sonarqube的目的四、sonarqube流程五、docker快速搭建sonarqube六、sonarqube scanner的安装和使用七、sonarqube对maven项目进行分析八、sonarqube分析报告解析九、代码扫描规则定制十…...

C++ 使用nlohmann/json.hpp库读写json字符串

1. json库 我个人比较喜欢 nlohmann/json.hpp 这个库&#xff0c;因为它只需要一个hpp文件即可&#xff0c;足够轻量&#xff01; 这是它的github地址。 2. 简单实例代码 #include <iostream> #include <json.hpp> #include <fstream> #include <stri…...

3GPP官网下载协议步骤

1.打开官网 https://www.3gpp.org/ 2.点击 3.在界面选择要找的series&#xff0c;跳转到查找界面 以V2X通信协议为例&#xff0c;论文中通常会看到许多应用&#xff1a; [7] “Study on evaluation methodology of new Vehicle-to-Everything (V2X) use cases for LTE and NR…...

【JAVA】Git 的基本概念和使用方式

Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。以下是Git的一些基本概念和使用方式的深入探讨&#xff1a; 基本概念 1. 仓库&#xff08;Repository&#xff09; 仓库是Git用来保存你的项目…...

C++多态实现原理详解

阅读引言&#xff1a; 我想象了一下&#xff0c; 假如人有突然问我什么是多态&#xff0c; 我该如何给别人说清楚呢&#xff1f;所以写下这篇文章&#xff0c; 希望大家看完有所收获。 ①. 开胃小菜 先看这样一个开胃小菜 这里我有点小小的疑惑&#xff0c; 大小为啥是1。 在C…...

[数据集][目标检测]交通灯检测数据集VOC+YOLO格式2600张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2600 标注数量(xml文件个数)&#xff1a;2600 标注数量(txt文件个数)&#xff1a;2600 标注…...

关于测试用例

目录 一 测试用例介绍 二 写用例的好处 三 不适合写用例的情况 一 测试用例介绍 测试用例由测试来写&#xff0c;编写时间在需求评审和设计评审&#xff08;如有&#xff09;结束后&#xff0c;需求提测前&#xff0c;用例依赖需求文档来编写。一般包含用例标题&#xff0c…...

一起长锈:3 类型安全的Rust宏(从Java与C++转Rust之旅)

讲动人的故事,写懂人的代码 故事梗概:在她所维护的老旧Java系统即将被淘汰的危机边缘,这位在编程中总想快速完事的女程序员,希望能转岗到公司内部使用Rust语言的新项目组,因此开始自学Rust;然而,在掌握了Rust编程知识之后,为了通过Rust项目组的技术面试,使得转岗成功而…...

《金融研究》:普惠金融改革试验区DID工具变量数据(2012-2023年)

数据简介&#xff1a;本数据集包括普惠金融改革试验区和普惠金融服务乡村振兴改革试验区两类。 其中&#xff0c;河南兰考、浙江宁波、福建龙岩和宁德、江西赣州和吉安、陕西铜川五省七地为普惠金融改革试验区。山东临沂、浙江丽水、四川成都三地设立的是普惠金融服务乡村振兴…...

Prompt|Kimi高阶技巧,99%的人都不知道

大家好&#xff0c;我是无界生长。 今天分享一条咒语&#xff0c;轻松让Kimi帮你生成流程图&#xff0c;学会了的话&#xff0c;点赞收藏起来吧&#xff01; 效果展示 我们演示一下让kimi帮忙绘制 关注微信公众号“无界生长”的流程图&#xff0c;最终效果图如下所示 效果还不…...

采购管理软件:采购自动化提高效率的5种方式

在采购领域&#xff0c;手动数据输入和耗时的文书工作的时代已经落后了。采购自动化正在改变游戏规则&#xff0c;使企业能够简化流程、降低成本并提高效率。 以下是采购自动化帮助企业提高效率的5种方法。 采购管理软件,采购自动化管理,8Manage SRM,高亚科技 减少手动流程和…...

Android App开机启动

清单文件 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><uses-permission android:name"andro…...

服务器直连电脑(盒子直连电脑)电脑需要设置为固定ip才能访问盒子

文章目录 现象盒子设置为固定ip&#xff0c;pc设置成固定ip&#xff08;以太网网卡&#xff0c;realtak那个&#xff0c;不是tap-windows那个&#xff0c;tap-windows不用管&#xff09;&#xff0c;在pc上用ip搜索工具搜索&#xff0c;可以搜到盒子ip。盒子设置为固定ip&#…...

【设计模式】之代理模式(两种)

系列文章目录 &#xff08;其他设计模式可以参考 &#x1f449;&#x1f449;&#x1f449;&#xff09;设计模式_小杰不秃头的博客 &#x1f60a;&#x1f604;&#x1f61b; 前言 今天继续给大家介绍23种设计模式中的代理模式&#xff0c;熟悉Spring的小伙伴都知道&#xf…...

【工具篇】-什么是.NET

“.NET"&#xff1a;.NET Core是由Microsoft开发&#xff0c;目前在.NET Foundation(一个非营利的开源组织)下进行管理。.NET Core是用C#和C编写的&#xff0c;并采用MIT协议作为开源协议。 简单来说&#xff1a;就是开发框架。 .NET 又称 .NET 平台或 .NET 框架&#xf…...

OmniReader Pro mac激活版:智慧阅读新选择,开启高效学习之旅

在追求知识的道路上&#xff0c;一款优秀的阅读工具是不可或缺的。OmniReader Pro作为智慧阅读的新选择&#xff0c;以其独特的功能和卓越的性能&#xff0c;为您开启高效学习之旅。 OmniReader Pro具备高效的文本识别和处理技术&#xff0c;能够快速准确地提取文档中的关键信息…...

Stable Diffusion学习记录

文章目录 前言电脑配置推荐环境搭建下载地址安装步骤步骤一&#xff0c;打开下载的秋叶整合包&#xff0c;路径秋叶整合包/sd-wenui-aki步骤二&#xff0c;打开下载好的sd-webui-aki-v4.8.7解压包 Stable Diffusion软件配置&#xff0c;插件安装&#xff0c;模型下载Stable Dif…...

阿里云 Linux 搭建邮件系统全流程及常见问题解决

阿里云 Linux 搭建 [conkl.com]邮件系统全流程及常见问题解决 目录 阿里云 Linux 搭建 [conkl.com]邮件系统全流程及常见问题解决一、前期准备&#xff08;关键配置需重点检查&#xff09;1.1 服务器与域名准备1.2 系统初始化&#xff08;必做操作&#xff09; 二、核心组件安装…...

K8S认证|CKS题库+答案| 7. Dockerfile 检测

目录 7. Dockerfile 检测 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、修改 Dockerfile 3&#xff09;、 修改 deployment.yaml 7. Dockerfile 检测 免费获取并激活 CKA_v1.31_模拟系统 题目 您必须在以…...

iview组件库:当后台返回到的数据与使用官网组件指定的字段不匹配时,进行修改某个属性名再将response数据渲染到页面上的处理

1、需求导入 当存在前端需要的数据的字段渲染到表格或者是一些公共的表格组件展示数据时的某个字段名与后台返回的字段不一致时&#xff0c;那么需要前端进行稍加处理&#xff0c;而不能直接this.list res.data;这样数据是渲染不出来的。 2、后台返回的数据类型 Datalist(pn) …...

Redis:Hash数据类型

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Redis &#x1f525; Hash哈希 &#x1f433; ⼏乎所有的主流编程语⾔都提供了哈希&#xff08;hash&#xff09;类型&#xff0c;它们的叫法可能是哈希、字典、关联数组、映射。在Redis中&#…...

Redis线程安全深度解析:单线程模型的并发智慧

Redis线程安全深度解析&#xff1a;单线程模型的并发智慧 引言&#xff1a;Redis的线程模型迷思 “Redis是单线程的”——这个广为流传的说法既正确又不完全正确。Redis的线程安全机制实际上是一套精心设计的并发控制体系&#xff0c;它既保持了单线程的简单性&#xff0c;又…...

yolov11与双目测距结合,实现目标的识别和定位测距(onnx版本)

一、yolov11双目测距基本流程 yolov11 双目测距的大致流程就是&#xff1a; 双目标定 --> 立体校正&#xff08;含消除畸变&#xff09; --> 立体匹配 --> 视差计算 --> 深度计算(3D坐标)计算 --> 目标检测 --> 目标距离计算及可视化 下面将分别阐述每…...

婚恋小程序直播系统框架搭建

逻辑分析 直播流管理&#xff1a;需要处理主播端的直播流推送&#xff0c;确保直播流能够稳定、高效地传输到各个观看用户的设备上。这涉及到选择合适的流媒体协议&#xff0c;如 RTMP&#xff08;Real-Time Messaging Protocol&#xff09;、HLS&#xff08;HTTP Live Streami…...

Protobuf 中的类型查找规则

a.proto syntax "proto2"; //protoc3生成代码兼容proto2语法 package pkgA; message Example { }ba.proto package pkgB.pkgA; message Example { }b.proto syntax "proto3"; //protoc3生成代码兼容proto2语法 package pkgB; import "test1/a.pr…...

SQL Server 日期时间类型全解析:从精确存储到灵活转换

SQL Server 日期时间类型全解析&#xff1a;从精确存储到灵活转换 一、引言&#xff1a;日期时间处理的核心挑战 在数据管理中&#xff0c;日期时间类型是最常用却最容易出错的数据类型之一。不同业务场景对时间精度、时区感知、存储效率的需求差异极大&#xff1a; 金融交易…...

手机号在网状态查询接口如何用PHP实现调用?

一、什么是手机号在网状态查询接口 通过精准探测手机号的状态&#xff0c;帮助平台减少此类问题的发生&#xff0c;提供更个性化的服务或进行地域性营销 二、应用场景 1. 金融风控 通过运营商在网态查询接口&#xff0c;金融机构可以核验贷款申请人的手机状态&#xff0c;拦…...