treeTable节点展开时，显示的滚动条设置通过设置scrollPos: 'fixed'无法保持

[jichuanan]

议题条件

• 我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
• 我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
• 我已仔细阅读： 🍀 Layui Issue 贡献指南

议题类型

疑是 BUG

使用版本

v2.9.9

问题描述

treeTable在基础属性中设置了“scrollPos: 'fixed'”，treeTable子节点展开时，把垂直滚动条滚动到中间某个位置，调用treeTable的reloadData方法，重新加载数据，滚动条无法保持在原来的位置，回到了顶部。
搜索了关于treeTable的issue，看到#1678是一个同样的问题，贤心回复“scrollPos只对 table 有效，而对 treeTable 无效”，我做了一个测试页面，发现在treeTable设置一个不大的高度时，“scrollPos: 'fixed'”这个参数有效，滚动条可以保持位置，当treeTable设置一个较大的高度时就不行。

在线演示地址可以看到，当treeTable高度设置500px时，重载数据就可以保持滚动条位置，当设置为600px时，重载数据滚动条就会回到顶部。

希望treeTable能解决这个问题，对于一个可编辑的treeTable，在编辑了某些cell的数字后，需要重新刷新整个table的数据时，使用体验非常差。。。

业务代码

layui.use(function(){
  var treeTable = layui.treeTable;
  var layer = layui.layer;
  var dropdown = layui.dropdown;
  // 渲染
  var inst = treeTable.render({
    elem: '#ID-treeTable-demo',
    url: 'https://unpkg.com/outeres@0.1.3/json/2/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    tree: {
      view: {
        showIcon: false,
      	expandAllDefault: 'all',
      },
    },
    //maxHeight: '600px', // 高度为600px时，重新加载数据滚动条无法保持原来的位置
    maxHeight: '500px',   // 高度为500px时，重新加载数据滚动条就保持原来的位置，奇怪
    toolbar: '#TPL-treeTable-demo',
    scrollPos: 'fixed',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
      {field: 'name', title: '用户名', width: 180, fixed: 'left'},
      {field: 'sex', title: '性别', width: 80, sort: true},
      {field: 'experience', title: '积分', width: 90, sort: true},
      {field: 'city', title: '城市', width: 100},
    ]],
    page: false
  });
  // 表头工具栏工具事件
  treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
    var config = obj.config;
    var tableId = config.id;
    // 获取选中行
    if (obj.event === "reloadData") {
      treeTable.reloadData('ID-treeTable-demo');
    }
  });
});

截图补充

No response

浏览器

chrome 124.0.6367.119

演示地址

https://stackblitz.com/edit/3mynts-fwdcxk?file=index.html

友好承诺

• 我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• 3mynts-fwdcxk (Open reproduction)

[jichuanan]

调查发现，treeTable重载数据时，会先加载显示顶层节点，然后根据重载数据前保存的子节点展开状态，重新展开需要展开的子节点。在顶层节点比较少，没有展开子节点没有滚动条的情况下，如果重载数据前有滚动条滚动在某个位子，重载数据后只显示顶层节点，还没有自动展开子节点时，滚动条就消失了，自动展开子节点时重新出现滚动条就会处在顶部，无法保持在重载数据之前的位置。在顶层节点比较多，不展开子节点也有滚动条的场合，重新加载数据，如果指定了 scrollPos: 'fixed' 参数，是可以保持滚动条位置的。
修正方法：
方法1：修改treeTable.js，在treeTable执行reload时先记下重载前的滚动条位置，重载后重新设置滚动条到原来的位置。

  // 重载
  treeTable.reload = function (id, options, deep, type) {
    // deep = deep !== false; // 默认采用深拷贝
    var that = getThisTable(id);
    if (!that) return;
    /**
     * treeTable重载数据时，会先加载显示顶层节点，然后根据重载数据前的子节点展开状态，展开相应的子节点，
     * 那么如果重载数据前有滚动条滚动在某个位子，重新加载时顶层节点如果比较少，只显示顶层节点时没有滚动条的情况下，
     * 自动展开子节点后，滚动条就会显示在顶部，无法保持在重载数据之前的位置。
     */
    if ((that.config.scrollPos === 'fixed' || options.scrollPos === 'fixed') && type === 'reloadData') {
      // 处理保持滚动条的问题,重载数据前记住滚动条的位置
      let scrollTop = $('div[lay-id="' + id + '"]').find('.layui-table-body.layui-table-main').scrollTop();
      if (typeof options.done === 'function' || typeof that.config.done === 'function') {
        let oriDone = options.done || that.config.done;
        options.done = function(){
          oriDone && oriDone.call(this);
          $('div[lay-id="' + id + '"]').find('.layui-table-body').scrollTop(scrollTop);
        }
      }
    }
    that.reload(options, deep, type);
    return thisTreeTable.call(that);
  };

方法2：自己的代码中打个补丁，将就一下

  treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
    var config = obj.config;
    var tableId = config.id;
    if (obj.event === "reloadData") {
      // 修正treeTable的 scrollPos: 'fixed' 参数无效，重载数据不能保持滚动条位置的问题
      let scrollTop = $('div[lay-id="' + tableId + '"]').find('.layui-table-body.layui-table-main').scrollTop();
      treeTable.reloadData('ID-treeTable-demo', {
        scrollPos: 'fixed',
        done: function() {
          $('div[lay-id="' + tableId + '"]').find('.layui-table-body').scrollTop(scrollTop);
        }
      });
    }
  });

演示地址

[Cuixq123]

这个很关键，很需要这个，希望早日发版