You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
4.1 KiB
124 lines
4.1 KiB
5 years ago
|
/**
|
||
|
|
* @author windy
|
||
|
|
* @version 2.0
|
||
|
|
* Created by windy on 2020/1/8
|
||
|
|
* 提供节点滚动加载方式
|
||
|
|
*/
|
||
|
|
|
||
|
|
!(function () {
|
||
|
|
BI.TreeRenderScrollService = BI.inherit(BI.OB, {
|
||
|
|
_init: function () {
|
||
|
|
this.nodeLists = {};
|
||
|
|
|
||
|
|
this.id = this.options.id;
|
||
|
|
// renderService是否已经注册了滚动
|
||
|
|
this.hasBinded = false;
|
||
|
|
|
||
|
|
this.container = this.options.container;
|
||
|
|
},
|
||
|
|
|
||
|
|
_getNodeListBounds: function (tId) {
|
||
|
|
var nodeList = this.options.subNodeListGetter(tId)[0];
|
||
|
|
return {
|
||
|
|
top: nodeList.offsetTop,
|
||
|
|
left: nodeList.offsetLeft,
|
||
|
|
width: nodeList.offsetWidth,
|
||
|
|
height: nodeList.offsetHeight
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_getTreeContainerBounds: function () {
|
||
|
|
var nodeList = this.container[0];
|
||
|
|
if (BI.isNotNull(nodeList)) {
|
||
|
|
return {
|
||
|
|
top: nodeList.offsetTop + nodeList.scrollTop,
|
||
|
|
left: nodeList.offsetLeft + nodeList.scrollLeft,
|
||
|
|
width: nodeList.offsetWidth,
|
||
|
|
height: nodeList.offsetHeight
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
|
||
|
|
_canNodePopulate: function (tId) {
|
||
|
|
if (this.nodeLists[tId].locked) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// 获取ul, 即子节点列表的bounds
|
||
|
|
// 是否需要继续加载，只需要看子节点列表的下边界与container是否无交集
|
||
|
|
var bounds = this._getNodeListBounds(tId);
|
||
|
|
var containerBounds = this._getTreeContainerBounds(tId);
|
||
|
|
// ul底部是不是漏出来了
|
||
|
|
if (bounds.top + bounds.height < containerBounds.top + containerBounds.height) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
|
||
|
|
_isNodeInVisible: function (tId) {
|
||
|
|
var nodeList = this.options.subNodeListGetter(tId);
|
||
|
|
return nodeList.length === 0 || nodeList.css("display") === "none";
|
||
|
|
},
|
||
|
|
|
||
|
|
pushNodeList: function (tId, populate) {
|
||
|
|
var self = this;
|
||
|
|
if (!BI.has(this.nodeLists, tId)) {
|
||
|
|
this.nodeLists[tId] = {
|
||
|
|
populate: BI.debounce(populate, 0),
|
||
|
|
options: {
|
||
|
|
times: 1
|
||
|
|
},
|
||
|
|
// 在上一次请求返回前, 通过滚动再次触发加载的时候, 不应该认为是下一次分页, 需要等待上次请求返回
|
||
|
|
// 以保证顺序和请求次数的完整
|
||
|
|
locked: false
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
this.nodeLists[tId].locked = false;
|
||
|
|
}
|
||
|
|
if(!this.hasBinded) {
|
||
|
|
// console.log("绑定事件");
|
||
|
|
this.hasBinded = true;
|
||
|
|
this.container && this.container.on("scroll", BI.debounce(function () {
|
||
|
|
self.refreshAllNodes();
|
||
|
|
}, 30));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refreshAllNodes: function () {
|
||
|
|
var self = this;
|
||
|
|
BI.each(this.nodeLists, function (tId) {
|
||
|
|
// 不展开的节点就不看了
|
||
|
|
!self._isNodeInVisible(tId) && self.refreshNodes(tId);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
refreshNodes: function (tId) {
|
||
|
|
if (this._canNodePopulate(tId)) {
|
||
|
|
var nodeList = this.nodeLists[tId];
|
||
|
|
nodeList.options.times++;
|
||
|
|
nodeList.locked = true;
|
||
|
|
nodeList.populate({
|
||
|
|
times: nodeList.options.times
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
removeNodeList: function (tId) {
|
||
|
|
delete this.nodeLists[tId];
|
||
|
|
if (BI.size(this.nodeLists) === 0) {
|
||
|
|
this.clear();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: function () {
|
||
|
|
var self = this;
|
||
|
|
BI.each(this.nodeLists, function (tId) {
|
||
|
|
self.removeNodeList(tId);
|
||
|
|
});
|
||
|
|
this.nodeLists = {};
|
||
|
|
// console.log("解绑事件");
|
||
|
|
this.container.off("scroll");
|
||
|
|
this.hasBinded = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})();
|