Merge pull request #1267 in VISUAL/fineui from ~WINDY/fineui:master to master

* commit '462d123ce314aaa78c54ef42b4f0ee6356765062':
  提供获取子节点列表的方法
  按照comment修改
  changelog
  去注释
  update
  树的滚动加载初试

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)

src/base/tree/ztree/asynctree.js

@@ -10,6 +10,15 @@ 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,
+            subNodeListGetter: function (tId) {
+                // 获取待检测的子节点列表, ztree并没有获取节点列表dom的API, 此处使用BI.$获取
+                return BI.$("#" + self.id + " #" + tId + "_ul");
+            }
+        });
     },
 
     // 配置属性
@@ -138,36 +147,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) {
+        function callback(nodes, hasNext) {
-            self.nodes.addNodes(treeNode, nodes);
+            if (hasNext) {
-            // 展开节点是没有分页的
+                self.service.pushNodeList(treeNode.tId, getNodes);
-            if (hasNext === true) {
+            } else {
-                BI.delay(function () {
+                self.service.removeNodeList(treeNode.tId);
-                    times++;
-                    op.times = times;
-                    o.itemsCreator(op, complete);
-                }, 100);
             }
+            // 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 +233,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);

src/base/tree/ztree/treerender.service.js

@@ -0,0 +1,121 @@
+/**
+ * @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(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;
+        }
+    });
+})();