From 627dc8b738f2bf621c8972497ec5ba3ce318ee25 Mon Sep 17 00:00:00 2001 From: caji Date: Fri, 17 May 2024 19:13:01 +0800 Subject: [PATCH] =?UTF-8?q?fix(treeTable):=20=E4=BF=AE=E5=A4=8D=E9=87=8D?= =?UTF-8?q?=E8=BD=BD=E6=95=B0=E6=8D=AE=E6=97=B6=EF=BC=8C=E6=8C=87=E5=AE=9A?= =?UTF-8?q?=E5=8F=82=E6=95=B0=20scrollPos:=20'fixed'=20=E6=97=A0=E6=95=88?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20(#1892)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 修正treeTable重载数据时，指定参数 scrollPos: 'fixed' ， 无法实现保持滚动条在原有位置的问题。 * 1，把修改代码移动到Class.prototype.render方法体中； 2，把let修改为var * 修改let->var * Update src/modules/treeTable.js Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com> * Update src/modules/treeTable.js Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com> * 按照评审人给出的修改意见进行修改 主要修改点： 1，通过给done包装函数设置scrollPosPatch标志位，避免重复包装； 2，包装后的done函数执行完毕后，恢复原来的done函数，避免以后再次触发done函数时，仍然执行保持滚动条位置的逻辑； * 函数调用时，call->apply * refactor: 简化代码 1. 将修复代码迁移至 updateOptions 2. table done 回调第四个参数，现在可以区分 reloadData 和 renderData --------- Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com> --- examples/treeTable-test-reloadData.html | 72 +++++++++++++++++++++++++ src/modules/table.js | 4 +- src/modules/treeTable.js | 19 ++++++- 3 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 examples/treeTable-test-reloadData.html diff --git a/examples/treeTable-test-reloadData.html b/examples/treeTable-test-reloadData.html new file mode 100644 index 00000000..4a17f2cc --- /dev/null +++ b/examples/treeTable-test-reloadData.html @@ -0,0 +1,72 @@ + + + + + + 树形表格 - layui + + + + +
+ + + + + + + + diff --git a/src/modules/table.js b/src/modules/table.js index d37dfe7a..42d51a2c 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -1079,7 +1079,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ // 耗时（接口请求+视图渲染） options.time = (new Date().getTime() - that.startTime) + ' ms'; } - done(res); + done(res, opts.type); }, error: function(e, msg){ that.errorView('请求异常，错误提示：'+ msg); @@ -1109,7 +1109,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ type: opts.type }), sort(); - done(res); + done(res, opts.type); } }; diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 2acdf500..cba477d2 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -137,6 +137,14 @@ layui.define(['table'], function (exports) { var parseData = options.parseData; var done = options.done; + // treeTable重载数据时，会先加载显示顶层节点，然后根据重载数据前的子节点展开状态，展开相应的子节点， + // 那么如果重载数据前有滚动条滚动在某个位子，重新加载时顶层节点如果比较少，只显示顶层节点时没有滚动条的情况下， + // 自动展开子节点后，滚动条就会显示在顶部，无法保持在重载数据之前的位置。 + // 处理保持滚动条的问题，重载数据前记录滚动条的位置 + if(reload === 'reloadData' && thatOptionsTemp.scrollPos === 'fixed'){ + that.scrollTopCache = that.config.elem.next().find(ELEM_BODY).scrollTop(); + } + if (thatOptionsTemp.url) { // 异步加载的时候需要处理parseData进行转换 if (!reload || (reload && parseData && !parseData.mod)) { @@ -180,7 +188,11 @@ layui.define(['table'], function (exports) { options.done = function () { var args = arguments; var doneThat = this; - var isRenderData = args[3]; // 是否是 renderData + // undefined: 初始 render 或 reload，两者本质没有区别可以不做区分 + // 'reloadData': 重载数据 + // 'renderData': 重新渲染数据 + var renderType = args[3]; + var isRenderData = renderType === 'renderData'; if (!isRenderData) { delete that.isExpandAll; } @@ -206,6 +218,11 @@ layui.define(['table'], function (exports) { that.renderTreeTable(tableView); + // 恢复滚动条位置 + if(renderType === 'reloadData' && doneThat.scrollPos === 'fixed'){ + tableView.find(ELEM_BODY).scrollTop(that.scrollTopCache); + } + if (layui.type(done) === 'function') { return done.apply(doneThat, args); }