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)
- 关于导航菜单nav HOT 1
- upload组件,希望增加一个点击后就触发的事件,在弹窗选择文件之前 HOT 6
- upload 组件, auto 选项开启时再次选择同一文件不自动上传 HOT 2
- tab 组件 lay-id 属性值包含某些特殊字符时,可能会导致 layui-tab-item 所在的标签解析异常 HOT 9
- treeTable的某列为checkbox,在遇到动态设置checkbox选中状态时,不能选中,官方也没有示例,网上更没有有效的办法 HOT 3
- TAB标签后台,内容页在IOS移动端无法显示 HOT 4
- treeTable绑定接口数据时,如何设置某列为checkbox选中?官方也没有示例,网上更没有有效的办法,按照示例都是不行大bug HOT 1
- treeTable绑定接口数据时,如何设置某列为checkbox选中?官方也没有示例,网上更没有有效的办法,按照示例都是不行大bug HOT 2
- treetable 默认关闭节点,再打开全部节点,done回调里面写的样式方法没有生效。 HOT 3
- table组件BUG HOT 2
- 建议优化【选项卡】tab组件在节点比较多场景下的UI HOT 2
- 请求css文件路径在某些情况下拼接错误 HOT 9
- 希望功能增强 table 背景行颜色设置.隔行背景颜色设置.鼠标经过颜色设置.选中行颜色设置 HOT 2
- table 分页表单中,如果有img图片标签,则总是重复加载图片 HOT 2
- chrome插件开发注入到content中时 所有图标不显示Fixbar tips层异常 HOT 1
- 用form表单通过layer.open+iframe的方式弹窗,通过parent.layer.close(index)关闭弹出层会自动对当前地址发送get请求? HOT 4
- 能在input select等等加size吗 大中小 HOT 2
- 使用树形表格treeTable.reloadAsyncNode(id, index)重载似乎有问题 HOT 1
- layui.table 使用前端分页,如何获取整个表格的实时数据(不仅是当前页) HOT 1
- Tree树组件的节点名称能否支持换行 HOT 1
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.