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

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);
 
         }
 

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;
+        }
+    });
+})();

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 = {};
+        }
+    });
+
+})();