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

小二·2024-05-08 14:54

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

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

高亮颜色浅可自行更改

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

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

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

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