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

http://www.lryc.cn/news/346097.html

相关文章:

  • window10下安装ubuntu系统以及docker使用
  • Netty核心组件介绍
  • 代码审计平台sonarqube的安装及使用
  • C++ 使用nlohmann/json.hpp库读写json字符串
  • 3GPP官网下载协议步骤
  • 【JAVA】Git 的基本概念和使用方式
  • C++多态实现原理详解
  • [数据集][目标检测]交通灯检测数据集VOC+YOLO格式2600张1类别
  • 关于测试用例
  • 一起长锈:3 类型安全的Rust宏(从Java与C++转Rust之旅)
  • 《金融研究》:普惠金融改革试验区DID工具变量数据(2012-2023年)
  • Prompt|Kimi高阶技巧,99%的人都不知道
  • 采购管理软件:采购自动化提高效率的5种方式
  • Android App开机启动
  • 服务器直连电脑(盒子直连电脑)电脑需要设置为固定ip才能访问盒子
  • 【设计模式】之代理模式(两种)
  • 【工具篇】-什么是.NET
  • OmniReader Pro mac激活版:智慧阅读新选择,开启高效学习之旅
  • Stable Diffusion学习记录
  • 安装openssh-server,提供远程ssh
  • 华纳云:选择数据库服务器你需要注意的5个原则
  • Linux动态库与静态库解析
  • 后端的一些科普文章
  • 【Android学习】日期和时间选择对话框
  • 在Linux上使用Selenium驱动Chrome浏览器无头模式
  • Feign 第一次调用为什么会很慢?
  • Spring Framework-简介
  • Linux——PHP8.0编译安装和yum安装
  • 【通义千问系列】Qwen-Agent 从入门到精通【持续更新中……】
  • 1081:分苹果