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/2] =?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 7a4ffb112c..d19f9edf3b 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 0000000000..ac35dcef92 --- /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/2] 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 d19f9edf3b..55f1ce0a79 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 ac35dcef92..30cadf73c1 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] = {