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

发布于:2024-05-11 ⋅ 阅读:(164) ⋅ 点赞:(0)

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

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

高亮颜色浅 可自行更改 

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

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


网站公告

今日签到

点亮在社区的每一天
去签到