BI-32529 fineui树控件去掉多余的线

demo/js/widget/tree/demo.multilayer_single_level_tree.js

@@ -44,7 +44,28 @@ Demo.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
     },
 
     mounted: function () {
-        this.tree.populate(BI.deepClone(Demo.CONSTANTS.TREE));
+        var tree = [
+            // {id: -2, pId: 0, value: "根目录1", text: "根目录1"},
+            {id: -1, pId: 0, value: "根目录", text: "根目录"},
+            {id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
+            {id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
+            {id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
+            {id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"},
+            {id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"},
+            {id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"},
+            {id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
+            {id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
+            {id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
+            {id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
+            {id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
+            {id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"},
+            {id: 3, pId: -1, value: "第一级目录3", text: "第一级目录3"},
+            {id: 31, pId: 3, value: "第二级文件2", text: "第二级文件2"},
+            {id: 33, pId: 3, value: "第二级目录3", text: "第二级目录1"},
+            {id: 32, pId: 3, value: "第二级文件3", text: "第二级文件3"},
+            {id: 331, pId: 33, value: "第三级文件1", text: "第三级文件1"}
+        ];
+        this.tree.populate(tree);
     }
 });
 

src/case/button/treeitem/item.first.treeleaf.js

@@ -53,7 +53,7 @@ BI.FirstTreeLeafItem = BI.inherit(BI.BasicButton, {
             width: 24,
             el: {
                 type: "bi.layout",
-                cls: "mid-line-conn-background",
+                cls: "first-line-conn-background",
                 width: 24,
                 height: o.height
             }

src/case/button/treeitem/item.last.treeleaf.js

@@ -53,7 +53,7 @@ BI.LastTreeLeafItem = BI.inherit(BI.BasicButton, {
             width: 24,
             el: {
                 type: "bi.layout",
-                cls: "mid-line-conn-background",
+                cls: "last-line-conn-background",
                 width: 24,
                 height: o.height
             }

src/case/checkbox/check.last.treenode.js

@@ -18,9 +18,9 @@ BI.LastTreeNodeCheckbox = BI.inherit(BI.IconButton, {
     setSelected: function (v) {
         BI.LastTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
         if (v === true) {
-            this.element.addClass("tree-expand-icon-type3");
+            this.element.addClass("tree-expand-icon-type4");
         } else {
-            this.element.removeClass("tree-expand-icon-type3");
+            this.element.removeClass("tree-expand-icon-type4");
         }
     }
 });

src/widget/multilayersingletree/multilayersingletree.leveltree.js

@@ -21,7 +21,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
         this.initTree(this.options.items);
     },
 
-    _formatItems: function (nodes, layer) {
+    _formatItems: function (nodes, layer, pNode) {
         var self = this;
         BI.each(nodes, function (i, node) {
             var extend = {};
@@ -29,28 +29,28 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
             }
+            extend.pNode = pNode;
             if (node.isParent === true || BI.isNotEmptyArray(node.children)) {
-                switch (i) {
-                    case 0 :
-                        extend.type = "bi.multilayer_single_tree_first_plus_group_node";
-                        break;
-                    case nodes.length - 1 :
-                        extend.type = "bi.multilayer_single_tree_last_plus_group_node";
-                        break;
-                    default :
                 extend.type = "bi.multilayer_single_tree_mid_plus_group_node";
-                        break;
+                if (i === 0 && !pNode) {
+                    extend.type = "bi.multilayer_single_tree_first_plus_group_node"
+                }
+                if (i === nodes.length - 1) {
+                    extend.type = "bi.multilayer_single_tree_last_plus_group_node";
+                    extend.isLastNode = true;
+                }
+                if (i === 0 && i === nodes.length - 1) {  // 根
+                    extend.type = "bi.multilayer_single_tree_plus_group_node";
                 }
                 BI.defaults(node, extend);
-
+                self._formatItems(node.children, layer + 1, node);
-                self._formatItems(node.children, layer + 1);
             } else {
-                switch (i) {
-                    case nodes.length - 1:
-                        extend.type = "bi.multilayer_single_tree_last_tree_leaf_item";
-                        break;
-                    default :
                 extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
+                if (i === 0 && !pNode) {
+                    extend.type = "bi.multilayer_single_tree_first_tree_leaf_item"
+                }
+                if (i === nodes.length - 1) {
+                    extend.type = "bi.multilayer_single_tree_last_tree_leaf_item";
                 }
                 BI.defaults(node, extend);
             }

src/widget/multilayersingletree/node/node.first.plus.js

@@ -29,6 +29,7 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
             id: o.id,
             pId: o.pId,
             open: o.open,
+            isLastNode: o.isLastNode,
             height: o.height,
             hgap: o.hgap,
             text: o.text,
@@ -43,11 +44,20 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
+        var needBlankLayers = [];
+        var pNode = o.pNode;
+        while (pNode) {
+            if (pNode.isLastNode) {
+                needBlankLayers.push(pNode.layer)
+            }
+            pNode = pNode.pNode;
+        }
+
         var items = [];
-        BI.count(0, o.layer, function () {
+        BI.count(0, o.layer, function (index) {
             items.push({
                 type: "bi.layout",
-                cls: "base-line-conn-background",
+                cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
                 width: 12,
                 height: o.height
             });

src/widget/multilayersingletree/node/node.last.plus.js

@@ -43,11 +43,20 @@ BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
+        var needBlankLayers = [];
+        var pNode = o.pNode;
+        while (pNode) {
+            if (pNode.isLastNode) {
+                needBlankLayers.push(pNode.layer)
+            }
+            pNode = pNode.pNode;
+        }
+
         var items = [];
-        BI.count(0, o.layer, function () {
+        BI.count(0, o.layer, function (index) {
             items.push({
                 type: "bi.layout",
-                cls: "base-line-conn-background",
+                cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
                 width: 12,
                 height: o.height
             });

src/widget/multilayersingletree/node/node.mid.plus.js

@@ -43,11 +43,20 @@ BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
+        var needBlankLayers = [];
+        var pNode = o.pNode;
+        while (pNode) {
+            if (pNode.isLastNode) {
+                needBlankLayers.push(pNode.layer)
+            }
+            pNode = pNode.pNode;
+        }
+
         var items = [];
-        BI.count(0, o.layer, function () {
+        BI.count(0, o.layer, function (index) {
             items.push({
                 type: "bi.layout",
-                cls: "base-line-conn-background",
+                cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
                 width: 12,
                 height: o.height
             });

src/widget/multilayersingletree/node/node.plus.js

@@ -0,0 +1,96 @@
+/**
+ *@desc 根节点,既是第一个又是最后一个
+ *@author dailer
+ *@date 2018/09/16
+ */
+BI.MultiLayerSingleTreePlusGroupNode = BI.inherit(BI.NodeButton, {
+    _defaultConfig: function () {
+        var conf = BI.MultiLayerSingleTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments);
+        return BI.extend(conf, {
+            extraCls: "bi-multilayer-single-tree-plus-group-node bi-list-item",
+            layer: 0, // 第几层级
+            id: "",
+            pId: "",
+            open: false,
+            height: 24
+        });
+    },
+    _init: function () {
+        BI.MultiLayerSingleTreePlusGroupNode.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        if (o.isLastNode && !o.pNode) {
+
+        }
+        this.node = BI.createWidget({
+            type: "bi.plus_group_node",
+            cls: "bi-list-item-none",
+            logic: {
+                dynamic: true
+            },
+            id: o.id,
+            pId: o.pId,
+            open: o.open,
+            isLastNode: o.isLastNode,
+            height: o.height,
+            hgap: o.hgap,
+            text: o.text,
+            value: o.value,
+            py: o.py,
+            keyword: o.keyword
+        });
+        this.node.on(BI.Controller.EVENT_CHANGE, function (type) {
+            if (type === BI.Events.CLICK) {// 本身实现click功能
+                return;
+            }
+            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        });
+
+        var needBlankLayers = [];
+        var pNode = o.pNode;
+        while (pNode) {
+            if (pNode.isLastNode) {
+                needBlankLayers.push(pNode.layer)
+            }
+            pNode = pNode.pNode;
+        }
+
+        var items = [];
+        BI.count(0, o.layer, function (index) {
+            items.push({
+                type: "bi.layout",
+                cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
+                width: 12,
+                height: o.height
+            });
+        });
+        items.push(this.node);
+        BI.createWidget({
+            type: "bi.td",
+            element: this,
+            columnSize: BI.makeArray(o.layer, 12),
+            items: [items]
+        });
+    },
+
+    doRedMark: function () {
+        this.node.doRedMark.apply(this.node, arguments);
+    },
+
+    unRedMark: function () {
+        this.node.unRedMark.apply(this.node, arguments);
+    },
+
+    doClick: function () {
+        BI.MultiLayerSingleTreePlusGroupNode.superclass.doClick.apply(this, arguments);
+        this.node.setSelected(this.isSelected());
+    },
+
+    setOpened: function (v) {
+        BI.MultiLayerSingleTreePlusGroupNode.superclass.setOpened.apply(this, arguments);
+        if (BI.isNotNull(this.node)) {
+            this.node.setOpened(v);
+        }
+    }
+});
+
+BI.shortcut("bi.multilayer_single_tree_plus_group_node", BI.MultiLayerSingleTreePlusGroupNode);

src/widget/multilayersingletree/treeitem/item.first.treeleaf.js

@@ -42,11 +42,21 @@ BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
+
+        var needBlankLayers = [];
+        var pNode = o.pNode;
+        while (pNode) {
+            if (pNode.isLastNode) {
+                needBlankLayers.push(pNode.layer)
+            }
+            pNode = pNode.pNode;
+        }
+
         var items = [];
-        BI.count(0, o.layer, function () {
+        BI.count(0, o.layer, function (index) {
             items.push({
                 type: "bi.layout",
-                cls: "base-line-conn-background",
+                cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
                 width: 12,
                 height: o.height
             });

src/widget/multilayersingletree/treeitem/item.last.treeleaf.js

@@ -42,11 +42,20 @@ BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
+        var needBlankLayers = [];
+        var pNode = o.pNode;
+        while (pNode) {
+            if (pNode.isLastNode) {
+                needBlankLayers.push(pNode.layer)
+            }
+            pNode = pNode.pNode;
+        }
+
         var items = [];
-        BI.count(0, o.layer, function () {
+        BI.count(0, o.layer, function (index) {
             items.push({
                 type: "bi.layout",
-                cls: "base-line-conn-background",
+                cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
                 width: 12,
                 height: o.height
             });

src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js

@@ -42,11 +42,20 @@ BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
+        var needBlankLayers = [];
+        var pNode = o.pNode;
+        while (pNode) {
+            if (pNode.isLastNode) {
+                needBlankLayers.push(pNode.layer)
+            }
+            pNode = pNode.pNode;
+        }
+
         var items = [];
-        BI.count(0, o.layer, function () {
+        BI.count(0, o.layer, function (index) {
             items.push({
                 type: "bi.layout",
-                cls: "base-line-conn-background",
+                cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
                 width: 12,
                 height: o.height
             });