From 71faad07cf182965467233cbe0989d3dec349e9c Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 16 Jan 2020 09:09:55 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E6=A0=91=E7=9A=84=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=88=9D=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/tree/ztree/asynctree.js | 43 ++++---- src/base/tree/ztree/treerender.service.js | 116 ++++++++++++++++++++++ 2 files changed, 141 insertions(+), 18 deletions(-) create mode 100644 src/base/tree/ztree/treerender.service.js diff --git a/src/base/tree/ztree/asynctree.js b/src/base/tree/ztree/asynctree.js index 7a4ffb112..d19f9edf3 100644 --- a/src/base/tree/ztree/asynctree.js +++ b/src/base/tree/ztree/asynctree.js @@ -10,6 +10,9 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { }, _init: function () { BI.AsyncTree.superclass._init.apply(this, arguments); + this.service = new BI.TreeRenderService({ + id: this.id + }); }, // 配置属性 @@ -138,36 +141,39 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { // 展开节点 _beforeExpandNode: function (treeId, treeNode) { var self = this, o = this.options; - var parentValues = treeNode.parentValues || self._getParentValues(treeNode); - var op = BI.extend({}, o.paras, { - id: treeNode.id, - times: 1, - parentValues: parentValues.concat(this._getNodeValue(treeNode)), - checkState: treeNode.getCheckStatus() - }); var complete = function (d) { var nodes = d.items || []; if (nodes.length > 0) { callback(self._dealWidthNodes(nodes), !!d.hasNext); } }; - var times = 1; - function callback (nodes, hasNext) { - self.nodes.addNodes(treeNode, nodes); - // 展开节点是没有分页的 - if (hasNext === true) { - BI.delay(function () { - times++; - op.times = times; - o.itemsCreator(op, complete); - }, 100); + function callback(nodes, hasNext) { + if (hasNext) { + self.service.pushNodeList(treeNode.tId, self.nodes, getNodes); + } else { + self.service.removeNodeList(treeNode.tId); } + console.log("add nodes"); + self.nodes.addNodes(treeNode, nodes); + + } + + function getNodes(times) { + console.log(times); + var parentValues = treeNode.parentValues || self._getParentValues(treeNode); + var op = BI.extend({}, o.paras, { + id: treeNode.id, + times: times, + parentValues: parentValues.concat(self._getNodeValue(treeNode)), + checkState: treeNode.getCheckStatus() + }); + o.itemsCreator(op, complete); } if (!treeNode.children) { setTimeout(function () { - o.itemsCreator(op, complete); + getNodes(1); }, 17); } }, @@ -221,6 +227,7 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { // 生成树方法 stroke: function (config) { delete this.options.keyword; + this.service.clear(); BI.extend(this.options.paras, config); var setting = this._configSetting(); this._initTree(setting); diff --git a/src/base/tree/ztree/treerender.service.js b/src/base/tree/ztree/treerender.service.js new file mode 100644 index 000000000..ac35dcef9 --- /dev/null +++ b/src/base/tree/ztree/treerender.service.js @@ -0,0 +1,116 @@ +/** + * @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; + }, + + _getNodeListBounds: function (tId) { + var nodeList = $("#" + this.id + " #" + tId + "_ul")[0]; + return { + top: nodeList.offsetTop, + left: nodeList.offsetLeft, + width: nodeList.offsetWidth, + height: nodeList.offsetHeight + } + }, + + _getTreeContainerBounds: function() { + var nodeList = $("#" + this.id).parent()[0]; + return { + top: nodeList.offsetTop + nodeList.scrollTop, + left: nodeList.offsetLeft + nodeList.scrollLeft, + width: nodeList.offsetWidth, + height: nodeList.offsetHeight + } + }, + + _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.id + " #" + tId + "_ul"); + return nodeList.length === 0 || nodeList.css("display") === "none"; + }, + + pushNodeList: function (tId, nodes, 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.id).parent().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(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.id).parent().off("scroll"); + this.hasBinded = false; + } + }); +})(); \ No newline at end of file From 14a4742dae2d7f8b73f20bccbb7ff4542548c5a7 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 27 Feb 2020 20:40:47 +0800 Subject: [PATCH 2/6] update --- src/base/tree/ztree/asynctree.js | 2 +- src/base/tree/ztree/treerender.service.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/base/tree/ztree/asynctree.js b/src/base/tree/ztree/asynctree.js index d19f9edf3..55f1ce0a7 100644 --- a/src/base/tree/ztree/asynctree.js +++ b/src/base/tree/ztree/asynctree.js @@ -150,7 +150,7 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { function callback(nodes, hasNext) { if (hasNext) { - self.service.pushNodeList(treeNode.tId, self.nodes, getNodes); + self.service.pushNodeList(treeNode.tId, getNodes); } else { self.service.removeNodeList(treeNode.tId); } diff --git a/src/base/tree/ztree/treerender.service.js b/src/base/tree/ztree/treerender.service.js index ac35dcef9..30cadf73c 100644 --- a/src/base/tree/ztree/treerender.service.js +++ b/src/base/tree/ztree/treerender.service.js @@ -54,7 +54,7 @@ return nodeList.length === 0 || nodeList.css("display") === "none"; }, - pushNodeList: function (tId, nodes, populate) { + pushNodeList: function (tId, populate) { var self = this; if (!BI.has(this.nodeLists, tId)) { this.nodeLists[tId] = { From 28918238d13ea81c77fb2240adbd656beb09b161 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Mon, 2 Mar 2020 16:47:56 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E5=8E=BB=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/tree/ztree/asynctree.js | 4 ++-- src/base/tree/ztree/treerender.service.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/base/tree/ztree/asynctree.js b/src/base/tree/ztree/asynctree.js index 55f1ce0a7..b492ddbcd 100644 --- a/src/base/tree/ztree/asynctree.js +++ b/src/base/tree/ztree/asynctree.js @@ -154,13 +154,13 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { } else { self.service.removeNodeList(treeNode.tId); } - console.log("add nodes"); + // console.log("add nodes"); self.nodes.addNodes(treeNode, nodes); } function getNodes(times) { - console.log(times); + // console.log(times); var parentValues = treeNode.parentValues || self._getParentValues(treeNode); var op = BI.extend({}, o.paras, { id: treeNode.id, diff --git a/src/base/tree/ztree/treerender.service.js b/src/base/tree/ztree/treerender.service.js index 30cadf73c..dac04f4b3 100644 --- a/src/base/tree/ztree/treerender.service.js +++ b/src/base/tree/ztree/treerender.service.js @@ -70,7 +70,7 @@ this.nodeLists[tId].locked = false; } if(!this.hasBinded) { - console.log("绑定事件"); + // console.log("绑定事件"); this.hasBinded = true; $("#" + this.id).parent().on("scroll", BI.debounce(function () { self.refreshAllNodes(); @@ -108,7 +108,7 @@ self.removeNodeList(tId); }); this.nodeLists = {}; - console.log("解绑事件"); + // console.log("解绑事件"); $("#" + this.id).parent().off("scroll"); this.hasBinded = false; } From 23d4b667dd5fee89008cbda4476ee9a458c67a38 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Mon, 2 Mar 2020 16:55:03 +0800 Subject: [PATCH 4/6] changelog --- changelog.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/changelog.md b/changelog.md index ace18e4cb..6ece36e8e 100644 --- a/changelog.md +++ b/changelog.md @@ -1,9 +1,12 @@ # 更新日志 -2.0(2020-2) +2.0(2020-03) +- 复选下拉树系列展开节点性能优化 + +2.0(2020-02) - 拓展BI.concat,使其可以拼接多个数组 - 修复勾选节点不影响父子节点勾选状态的树搜索选中getValue不正常的问题 -2.0(2020-1) +2.0(2020-01) - 修复单值系滑块滑动松手后发两次EVENT_CHANGE的问题 2.0(2019-12) From bdb58acf2487620b6895f21e35b599fdb61fe9a7 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Tue, 3 Mar 2020 11:56:05 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E6=8C=89=E7=85=A7comment=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/tree/ztree/asynctree.js | 3 ++- src/base/tree/ztree/treerender.service.js | 27 ++++++++++++++--------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/base/tree/ztree/asynctree.js b/src/base/tree/ztree/asynctree.js index b492ddbcd..1c6ed5395 100644 --- a/src/base/tree/ztree/asynctree.js +++ b/src/base/tree/ztree/asynctree.js @@ -11,7 +11,8 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { _init: function () { BI.AsyncTree.superclass._init.apply(this, arguments); this.service = new BI.TreeRenderService({ - id: this.id + id: this.id, + container: this.element }); }, diff --git a/src/base/tree/ztree/treerender.service.js b/src/base/tree/ztree/treerender.service.js index dac04f4b3..5789ae16e 100644 --- a/src/base/tree/ztree/treerender.service.js +++ b/src/base/tree/ztree/treerender.service.js @@ -12,10 +12,12 @@ this.id = this.options.id; // renderService是否已经注册了滚动 this.hasBinded = false; + + this.container = this.options.container; }, _getNodeListBounds: function (tId) { - var nodeList = $("#" + this.id + " #" + tId + "_ul")[0]; + var nodeList = BI.$("#" + this.id + " #" + tId + "_ul")[0]; return { top: nodeList.offsetTop, left: nodeList.offsetLeft, @@ -24,14 +26,17 @@ } }, - _getTreeContainerBounds: function() { - var nodeList = $("#" + this.id).parent()[0]; - return { - top: nodeList.offsetTop + nodeList.scrollTop, - left: nodeList.offsetLeft + nodeList.scrollLeft, - 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) { @@ -50,7 +55,7 @@ }, _isNodeInVisible: function (tId) { - var nodeList = $("#" + this.id + " #" + tId + "_ul"); + var nodeList = BI.$("#" + this.id + " #" + tId + "_ul"); return nodeList.length === 0 || nodeList.css("display") === "none"; }, @@ -72,7 +77,7 @@ if(!this.hasBinded) { // console.log("绑定事件"); this.hasBinded = true; - $("#" + this.id).parent().on("scroll", BI.debounce(function () { + this.container && this.container.on("scroll", BI.debounce(function () { self.refreshAllNodes(); }, 30)); } @@ -109,7 +114,7 @@ }); this.nodeLists = {}; // console.log("解绑事件"); - $("#" + this.id).parent().off("scroll"); + this.container.off("scroll"); this.hasBinded = false; } }); From 462d123ce314aaa78c54ef42b4f0ee6356765062 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Tue, 3 Mar 2020 13:57:51 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E6=8F=90=E4=BE=9B=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E5=AD=90=E8=8A=82=E7=82=B9=E5=88=97=E8=A1=A8=E7=9A=84=E6=96=B9?= =?UTF-8?q?=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/tree/ztree/asynctree.js | 7 ++++++- src/base/tree/ztree/treerender.service.js | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/base/tree/ztree/asynctree.js b/src/base/tree/ztree/asynctree.js index 1c6ed5395..67f9f7a01 100644 --- a/src/base/tree/ztree/asynctree.js +++ b/src/base/tree/ztree/asynctree.js @@ -10,9 +10,14 @@ 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 + container: this.element, + subNodeListGetter: function (tId) { + // 获取待检测的子节点列表, ztree并没有获取节点列表dom的API, 此处使用BI.$获取 + return BI.$("#" + self.id + " #" + tId + "_ul"); + } }); }, diff --git a/src/base/tree/ztree/treerender.service.js b/src/base/tree/ztree/treerender.service.js index 5789ae16e..d953c6568 100644 --- a/src/base/tree/ztree/treerender.service.js +++ b/src/base/tree/ztree/treerender.service.js @@ -17,7 +17,7 @@ }, _getNodeListBounds: function (tId) { - var nodeList = BI.$("#" + this.id + " #" + tId + "_ul")[0]; + var nodeList = this.options.subNodeListGetter(tId)[0]; return { top: nodeList.offsetTop, left: nodeList.offsetLeft, @@ -55,7 +55,7 @@ }, _isNodeInVisible: function (tId) { - var nodeList = BI.$("#" + this.id + " #" + tId + "_ul"); + var nodeList = this.options.subNodeListGetter(tId); return nodeList.length === 0 || nodeList.css("display") === "none"; },