mirror of https://github.com/layui/layui
fix: 重复 render 时停止 onserveResize
parent
8908d68bf3
commit
a3e264c7d1
|
@ -154,6 +154,8 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
|
|||
|
||||
var DATA_MOVE_NAME = 'LAY_TABLE_MOVE_DICT';
|
||||
|
||||
var resizeObserver = lay._createResizeObserver(MOD_NAME);
|
||||
|
||||
// thead 区域模板
|
||||
var TPL_HEADER = function(options){
|
||||
var rowCols = '{{#var colspan = layui.type(item2.colspan2) === \'number\' ? item2.colspan2 : item2.colspan; if(colspan){}} colspan="{{=colspan}}"{{#} if(item2.rowspan){}} rowspan="{{=item2.rowspan}}"{{#}}}';
|
||||
|
@ -288,6 +290,7 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
|
|||
var that = this;
|
||||
that.index = ++table.index;
|
||||
that.config = $.extend({}, that.config, table.config, options);
|
||||
that.unobserveResize = $.noop;
|
||||
that.render();
|
||||
};
|
||||
|
||||
|
@ -318,6 +321,11 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
|
|||
options.elem.attr('id') || that.index
|
||||
);
|
||||
|
||||
// 重复 render 时清理旧实例
|
||||
if(thisTable.that[id] && thisTable.that[id] !== that){
|
||||
thisTable.that[id].dispose();
|
||||
}
|
||||
|
||||
thisTable.that[id] = that; // 记录当前实例对象
|
||||
thisTable.config[id] = options; // 记录当前实例配置项
|
||||
|
||||
|
@ -460,7 +468,7 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
|
|||
|
||||
that.pullData(that.page); // 请求数据
|
||||
that.events(); // 事件
|
||||
that.autoResize();
|
||||
that.observeResize(); // 观察尺寸变化
|
||||
};
|
||||
|
||||
// 根据列类型,定制化参数
|
||||
|
@ -2928,13 +2936,16 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
|
|||
}
|
||||
};
|
||||
|
||||
Class.prototype.createResizeObserver = function(){
|
||||
Class.prototype.dispose = function(){
|
||||
var that = this;
|
||||
if(that.resizeObserver){
|
||||
that.resizeObserver.disconnect();
|
||||
that.resizeObserver = null;
|
||||
|
||||
that.unobserveResize();
|
||||
for (const propName in that) {
|
||||
if(lay.hasOwn(that, propName) && propName !== 'config'){
|
||||
that[propName] = null;
|
||||
}
|
||||
}
|
||||
that.resizeObserver = lay._createResizeObserver('table-' + that.config.id);
|
||||
|
||||
}
|
||||
|
||||
Class.prototype.syncFixedColHeight = function(){
|
||||
|
@ -2945,13 +2956,12 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
|
|||
var rightTrs = that.layFixRight.find('>.layui-table-body>table>tbody>tr');
|
||||
var mainTrs = tableElem.find('>tbody>tr');
|
||||
|
||||
// 批量获取高度
|
||||
// 批量获取主表格行高,设置高度以优化性能
|
||||
var heights = [];
|
||||
mainTrs.each(function() {
|
||||
heights.push(that.getElementSize(this).height);
|
||||
});
|
||||
|
||||
// 批量设置高度
|
||||
if (leftTrs.length) {
|
||||
leftTrs.each(function(i) {
|
||||
if (heights[i]) {
|
||||
|
@ -2969,27 +2979,39 @@ layui.define(['lay', 'i18n', 'laytpl', 'laypage', 'form', 'util'], function(expo
|
|||
}
|
||||
}
|
||||
|
||||
Class.prototype.autoResize = function(){
|
||||
Class.prototype.observeResize = function(){
|
||||
var that = this;
|
||||
|
||||
that.createResizeObserver();
|
||||
|
||||
if(!that.resizeObserver) return;
|
||||
if(!resizeObserver) return;
|
||||
|
||||
that.unobserveResize();
|
||||
|
||||
var el = that.elem[0];
|
||||
var tableEl = that.layMain.children('table')[0];
|
||||
// 显示或隐藏时重置列宽
|
||||
that.resizeObserver.observe(that.elem[0], $.proxy(that.resize, that));
|
||||
resizeObserver.observe(el, $.proxy(that.resize, that));
|
||||
|
||||
// 同步固定列表格和主表格高度
|
||||
var lineStyle = that.config.lineStyle;
|
||||
var isAutoHeight = lineStyle && (/\bheight\s*:\s*auto\b/g.test(lineStyle) || lineStyle.indexOf('max-height') !== -1);
|
||||
that.needSyncFixedColHeight = (that.layBody.length > 1) && (that.config.syncFixedRowHeight || (that.config.syncFixedRowHeight !== false && isAutoHeight));
|
||||
// 只重载数据时需要主动同步高度,因为 tbody 大小可能不变
|
||||
var needSyncFixedColHeight = that.needSyncFixedColHeight = (that.layBody.length > 1) && (that.config.syncFixedRowHeight || (that.config.syncFixedRowHeight !== false && isAutoHeight));
|
||||
|
||||
if(that.needSyncFixedColHeight){
|
||||
that.resizeObserver.observe(
|
||||
that.layMain.children('table')[0],
|
||||
if(needSyncFixedColHeight){
|
||||
resizeObserver.observe(
|
||||
tableEl,
|
||||
$.proxy(that.syncFixedColHeight, that)
|
||||
);
|
||||
}
|
||||
|
||||
that.unobserveResize = function(){
|
||||
resizeObserver.unobserve(el);
|
||||
if(needSyncFixedColHeight){
|
||||
resizeObserver.unobserve(tableEl);
|
||||
}
|
||||
|
||||
that.unobserveResize = $.noop;
|
||||
}
|
||||
};
|
||||
|
||||
// 全局事件
|
||||
|
|
Loading…
Reference in New Issue