Comments (3)
调查发现,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);
}
});
}
});
from layui.
Start a new pull request in StackBlitz Codeflow.
from layui.
这个很关键,很需要这个,希望早日发版
from layui.
Related Issues (20)
- 升级2.9.10后,Tab 里面的echarts图表无法显示 HOT 4
- 请问<input type="checkbox">如何实现禁止修改,又不会像添加disabled属性那样变灰? HOT 3
- laytpl能更好用! HOT 2
- treeTable调用reload方法之后显示无数据 HOT 1
- layui.util事件委托“event”已弃用 HOT 3
- 调用treeTable.reload方法之后丢失树表数据 HOT 3
- csp 问题 HOT 2
- select 可以有选择事件,可以加个回调的回车事件吗? HOT 6
- Layui TreeTable 组件问题 HOT 7
- 封装 IndexedDb HOT 2
- 选择多个文件上传时,其它请求被取消 HOT 1
- table.renderData 刷新缓存,分页失效 HOT 3
- select option 值存在双引号问题,为啥双引号后面内容全部不见了?比如 测试"英文"123 ,只剩下测试 HOT 3
- upload组件,不能自定义提示文本的offset? HOT 4
- table中自定义输入框number类型添加lay-affix="number"后,点击后面的箭头调整数字,监听input失效 HOT 1
- number类型input的小bug HOT 1
- 流加载自定义‘加载更多’按钮的样式
- 弹出层(layer.open)在火狐浏览器下打开的窗口不能自适应 HOT 1
- table.reloadData重置td的一些DOM属性 HOT 2
- table单元格展开,宽度判断存在异常
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from layui.