Browse Source

BI-61057 refactor: 提供加载更多的分页方式

es6
windy 5 years ago
parent
commit
91309fe409
  1. 7
      src/base/tree/ztree/asynctree.js
  2. 124
      src/base/tree/ztree/treerender.scroll.service.js
  3. 76
      src/base/tree/ztree/treetrender.page.service.js

7
src/base/tree/ztree/asynctree.js

@ -11,9 +11,7 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
_init: function () {
BI.AsyncTree.superclass._init.apply(this, arguments);
var self = this;
this.service = new BI.TreeRenderService({
id: this.id,
container: this.element,
this.service = new BI.TreeRenderPageService({
subNodeListGetter: function (tId) {
// 获取待检测的子节点列表, ztree并没有获取节点列表dom的API, 此处使用BI.$获取
return BI.$("#" + self.id + " #" + tId + "_ul");
@ -156,13 +154,12 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
};
function callback(nodes, hasNext) {
self.nodes.addNodes(treeNode, nodes);
if (hasNext) {
self.service.pushNodeList(treeNode.tId, getNodes);
} else {
self.service.removeNodeList(treeNode.tId);
}
// console.log("add nodes");
self.nodes.addNodes(treeNode, nodes);
}

124
src/base/tree/ztree/treerender.scroll.service.js

@ -0,0 +1,124 @@
/**
* @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;
}
});
})();

76
src/base/tree/ztree/treetrender.page.service.js

@ -0,0 +1,76 @@
/**
* @author windy
* @version 2.0
* Created by windy on 2020/1/8
* 提供节点分页加载方式
*/
!(function () {
BI.TreeRenderPageService = BI.inherit(BI.OB, {
_init: function () {
this.nodeLists = {};
},
_getLoadingBar: function(tId) {
var self = this;
var tip = BI.createWidget({
type: "bi.loading_bar",
height: 25,
handler: function () {
self.refreshNodes(tId);
}
});
tip.setLoaded();
return tip;
},
pushNodeList: function (tId, populate) {
var self = this, o = this.options;
var tip = this._getLoadingBar(tId);
if (!BI.has(this.nodeLists, tId)) {
this.nodeLists[tId] = {
populate: BI.debounce(populate, 0),
options: {
times: 1
},
loadWidget: tip
};
} else {
this.nodeLists[tId].loadWidget.destroy();
this.nodeLists[tId].loadWidget = tip;
}
BI.createWidget({
type: "bi.vertical",
element: o.subNodeListGetter(tId),
items: [tip]
});
},
refreshNodes: function (tId) {
var nodeList = this.nodeLists[tId];
nodeList.options.times++;
nodeList.loadWidget.setLoading();
nodeList.populate({
times: nodeList.options.times
});
},
removeNodeList: function (tId) {
this.nodeLists[tId].loadWidget.destroy();
this.nodeLists[tId].loadWidget = null;
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 = {};
}
});
})();
Loading…
Cancel
Save