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

相关推荐
星语卿6 分钟前
浏览器重绘与重排
前端·浏览器
西瓜_号码8 分钟前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
小小小小宇21 分钟前
前端实现合并两个已排序链表
前端
yngsqq39 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk41 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan43 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE1 小时前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年1 小时前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能1 小时前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房1 小时前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端