From 91309fe4090f250d15050b1ab74c0af6eb909dea Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 23 Apr 2020 15:34:13 +0800 Subject: [PATCH] =?UTF-8?q?BI-61057=20refactor:=20=E6=8F=90=E4=BE=9B?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A=E7=9A=84=E5=88=86=E9=A1=B5?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/tree/ztree/asynctree.js | 7 +- .../tree/ztree/treerender.scroll.service.js | 124 ++++++++++++++++++ .../tree/ztree/treetrender.page.service.js | 76 +++++++++++ 3 files changed, 202 insertions(+), 5 deletions(-) create mode 100644 src/base/tree/ztree/treerender.scroll.service.js create mode 100644 src/base/tree/ztree/treetrender.page.service.js diff --git a/src/base/tree/ztree/asynctree.js b/src/base/tree/ztree/asynctree.js index 569ada929..a26affd56 100644 --- a/src/base/tree/ztree/asynctree.js +++ b/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); } diff --git a/src/base/tree/ztree/treerender.scroll.service.js b/src/base/tree/ztree/treerender.scroll.service.js new file mode 100644 index 000000000..a2d019c46 --- /dev/null +++ b/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; + } + }); +})(); \ No newline at end of file diff --git a/src/base/tree/ztree/treetrender.page.service.js b/src/base/tree/ztree/treetrender.page.service.js new file mode 100644 index 000000000..628c7ba44 --- /dev/null +++ b/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 = {}; + } + }); + +})(); \ No newline at end of file