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 1/3] =?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 From 2a5672af00ac05fb3075e9ee727abb43f978ebaa Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 23 Apr 2020 15:34:52 +0800 Subject: [PATCH 2/3] update --- src/base/tree/ztree/treerender.service.js | 123 ---------------------- 1 file changed, 123 deletions(-) delete mode 100644 src/base/tree/ztree/treerender.service.js diff --git a/src/base/tree/ztree/treerender.service.js b/src/base/tree/ztree/treerender.service.js deleted file mode 100644 index 37ef035b9..000000000 --- a/src/base/tree/ztree/treerender.service.js +++ /dev/null @@ -1,123 +0,0 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2020/1/8 - */ - -!(function () { - BI.TreeRenderService = 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 From 131e0af0297d015b9e1d4599121f7f2392b30fbe Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 23 Apr 2020 15:35:49 +0800 Subject: [PATCH 3/3] changelog --- changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/changelog.md b/changelog.md index 10554c938..7f8f21ba8 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,6 @@ # 更新日志 2.0(2020-04) +- 复选下拉树展开节点提供分页加载和滚动加载两种方式 - 修复了复选下拉列表初始化的时候发送执行两次itemsCreator的问题 - 修复了virtual_list重新populate无效的问题 - 复选下拉框新增值的时候外抛事件