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

news2024/11/22 4:39:06

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

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

高亮颜色浅 可自行更改 

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

// 初始化滚动条位置变量
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;

  // 假设这里有你想要高亮显示的id
  let highlightId = 'yourDesiredId';
  scrollToAndHighlight(highlightId);

  layui.table.reload('test', { data: productList }); // 重载表格
  form.render(); // 刷新表单
}

// 调用fn函数执行重载操作
fn();

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

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

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

相关文章

Shuffle Cards (STL rope平衡树库)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例1&#xff1a; 输入 5 1 2 3 输出 2 3 4 1 5 样例2&#xff1a; 输入 5 2 2 3 2 3 输出 3 4 1 2 5 样例3&#xff1a; 输入 5 3 2 3 1 4 2 4输出 3 4 1 5 2 思路&#xff1a; 这道题&…

windows端口复用

1. 概述 使用 HTTP.sys 中的 Net.tcp Port Sharing 服务&#xff0c;配合 WinRM 实现端口复用。 优点&#xff1a; HTTP.sys 为 windows 原生机制&#xff0c; WinRM 为 windows 自带功能&#xff0c;动作较小&#xff0c;不易触发主 动防御。 需要管理员权限。 2. 原理 (…

STM32 VS Code 扩展用户指南

系列文章目录 前言 一、视频教程快速入门 通过我们简单易学的视频教程&#xff0c;快速掌握新版本的使用方法&#xff1a; 二、功能描述 2.1 创建/导入项目 STM32 VS Code 扩展提供两种不同的项目创建选项&#xff1a; STM32CubeMX 项目&#xff1a; 这是一个依靠 CMake 作为…

线下预约线下消费万能DIY小程序源码系统 带完整安装代码包

在数字化时代&#xff0c;线上线下融合的消费模式已成为新趋势。为满足广大商家对于个性化预约系统的需求&#xff0c;我们隆重推出了“线下预约线下消费万能DIY小程序源码系统”。该系统不仅具备完整的安装代码包&#xff0c;还提供了丰富的定制功能&#xff0c;助力商家轻松搭…

【大比武01】AIGC赋能档案文创设计的尝试

关注我们 - 数字罗塞塔计划 - 随着科技的飞速发展&#xff0c;AI技术逐渐深入我们的工作与生活&#xff0c;特别是随着2022年底ChatGPT的横空出世&#xff0c;AIGC&#xff08;Artificial Intelligence Generated Content&#xff0c;内容生成式人工智能&#xff09;开始登上历…

Covalent引入五个新网络运营商,提升去中心化特性和数据安全性

为了进一步扩大运营商基础以并践行去中心化网络基础设施的宗旨&#xff0c;Covalent Network&#xff08;CQT&#xff09;在网络中引入了五个新的区块样本生产者&#xff08;BSPs&#xff09;角色。该举措不仅重申了 Covalent Network&#xff08;CQT&#xff09;对社区驱动协议…

20基础解决-buuctf-1.RSA1

2.buuctf-1.RSA1 RSATool2v17工具的使用 打开RSA Tool 1.Number Base 设置为十进制 2.注意&#xff1a;Public Exponent这里要使用16进制的数&#xff0c;如果公钥e17的话&#xff0c;就应该填入十六进制的11 3.给出p,q,e的话直接填入&#xff0c;再点击Calc.D,获得d 4.给出…

【第6节课笔记】LagentAgentLego

Lagent 最中间部分的是LLM&#xff0c;即为大语言模型模块&#xff0c;他可以思考planning和调用什么action&#xff0c;再将其转发给动作执行器action executer执行。 支持的工具如下&#xff1a; Arxiv 搜索 Bing 地图 Google 学术搜索 Google 搜索 交互式 IPython 解释器 IP…

C++ | Leetcode C++题解之第74题搜索二维矩阵

题目&#xff1a; 题解&#xff1a; class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int m matrix.size(), n matrix[0].size();int low 0, high m * n - 1;while (low < high) {int mid (high - low) / 2 l…

安卓玩机工具----一键备份手机分区 防止全檫除或者格机导致安全数据分区丢失

工具说明; 目前玩机root后有很多格机脚本。模块等等误刷会导致基带信号等等问题&#xff0c;在前面的博文中我有介绍过备份主要数据分区的重要性 。其实对于不了解root和不安装有些模块 外挂等等需要的友友不建议对手机进行root。root后对于手机安全性会有所降低。对于玩家来说…

信创 | 中国信创建设的历程与未来展望!

中国信创建设的历程与未来展望可以从多个维度进行分析。首先&#xff0c;从发展历程来看&#xff0c;中国信创产业的发展可以分为几个阶段。根据不同的资料来源&#xff0c;这些阶段的划分有所不同&#xff0c;但大体上可以概括为起步、试点、快速发展等关键时期。 起步阶段&am…

医疗器械软件如何生成符合FDA要求的SBOM文件?

在当今这个高度互联的世界&#xff0c;医疗器械的安全性和可靠性对于保障公众健康至关重要。FDA作为美国食品和药物的主要监管机构&#xff0c;长期以来一直致力于确保医疗器械的安全性和有效性。 2023年9月27日&#xff0c;美国食品和药品监督管理局&#xff08;后续简称FDA&…

文本批量操作实例:如何实现文本批量拆分?实用方法与技巧分享

在文本处理和数据分析的过程中&#xff0c;我们经常会遇到需要批量拆分大量文本数据的情况。文本批量拆分能够大大提高工作效率&#xff0c;减少重复劳动。下面&#xff0c;我们将通过一个实例来介绍如何实现文本批量拆分&#xff0c;并分享一些实用方法与技巧。 一、实例背景 …

ESP32S3各个管脚使用需要注意的情况说明:

想使用ESP32S3做个控制电路&#xff0c;管脚使用情况自己整理了一下&#xff0c;记录一下&#xff0c;免得后面又忘记了&#xff0c;有不对之处望帮助更正&#xff1a; IO0和IO46先要说明一下&#xff1a;以前只注意IO0是启动刷机的时候用的&#xff0c;低电平时启动是串口刷机…

MT2050 矩阵01变

注意&#xff1a; 输入是直接输入了一行&#xff0c;所以不能使用for i{ for j {} }&#xff0c;可以使用string 读一行然后挨个分析。 使用前缀和。 代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 105; int n, m; int b[N][N]; strin…

如何在Hostease的Linux虚拟主机上永久移除WordPress网站

最近有遇到客户咨询如何移除Linux虚拟主机上的WordPress网站的&#xff0c; 因为原先的站点长时间不更新&#xff0c;被恶意篡改&#xff0c;跳转到了一个博彩网站上&#xff0c;本身网站也比较旧了&#xff0c;客户也不准备修复&#xff0c;准备重新建站。但是又怕移除不干净&…

【Django学习笔记(十)】Django的创建与运行

Django的创建与运行 前言正文1、安装Django2、创建项目2.1 基于终端创建项目2.2 基于Pycharm创建项目2.3 两种方式对比 3、默认项目文件介绍4、APP5、启动运行Django5.1 激活App5.2 编写URL和视图函数对应关系5.3 启动Django项目5.3.1 命令行启动5.3.2 Pycharm启动5.3.3 views.…

Re71:读论文 Sequence to Sequence Learning with Neural Networks

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;Sequence to Sequence Learning with Neural Networks ArXiv下载地址&#xff1a;https://arxiv.org/abs/1409.3215 本文是2014年NeurIPS论文&#xff08;那时候这个会还叫NIPS&#xf…

共享WiFi项目加盟骗局:共享WiFi贴码收益真的月入过万?

如今每个人的手机都是智能手机&#xff0c;我们几乎随时随地都需要网络的陪伴。而随着共享经济的概念深入人心&#xff0c;一种名为“共享WiFi贴码”的新兴事物逐渐走入了我们的视线。据说通过这种方式&#xff0c;人们可以实现轻资产创业&#xff0c;甚至有人声称能借此达到月…

ubuntu_Docker安装配置

什么是docker? Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows操作系统的机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不会有…