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;

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

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

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

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

相关推荐
chimpro1 分钟前
都2025年了还不会flex?一篇文章带你理顺flex!
前端
LeeAt1 分钟前
AI单词拍照识别移动端项目(一)
前端·react.js·ai编程
Mintopia9 分钟前
三维空间的 “切蛋糕大师”:八叉树的底层奥秘与妙用
前端·javascript·计算机图形学
布兰妮甜21 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia22 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene31 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子40 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*16881 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化