From e6677f779cdb16c66568309c47b7816209931d83 Mon Sep 17 00:00:00 2001 From: Dailer Date: Sun, 16 Sep 2018 16:22:19 +0800 Subject: [PATCH] =?UTF-8?q?BI-32529=20=20fineui=E6=A0=91=E6=8E=A7=E4=BB=B6?= =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=A4=9A=E4=BD=99=E7=9A=84=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tree/demo.multilayer_single_level_tree.js | 23 ++++- .../button/treeitem/item.first.treeleaf.js | 2 +- .../button/treeitem/item.last.treeleaf.js | 2 +- src/case/checkbox/check.last.treenode.js | 8 +- .../multilayersingletree.leveltree.js | 38 ++++---- .../node/node.first.plus.js | 14 ++- .../node/node.last.plus.js | 13 ++- .../node/node.mid.plus.js | 13 ++- .../multilayersingletree/node/node.plus.js | 96 +++++++++++++++++++ .../treeitem/item.first.treeleaf.js | 14 ++- .../treeitem/item.last.treeleaf.js | 13 ++- .../treeitem/item.mid.treeleaf.js | 13 ++- 12 files changed, 211 insertions(+), 38 deletions(-) create mode 100644 src/widget/multilayersingletree/node/node.plus.js diff --git a/demo/js/widget/tree/demo.multilayer_single_level_tree.js b/demo/js/widget/tree/demo.multilayer_single_level_tree.js index 49f4f9a39..967c8d5f4 100644 --- a/demo/js/widget/tree/demo.multilayer_single_level_tree.js +++ b/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); } }); diff --git a/src/case/button/treeitem/item.first.treeleaf.js b/src/case/button/treeitem/item.first.treeleaf.js index e70c98fbc..1a25b47e2 100644 --- a/src/case/button/treeitem/item.first.treeleaf.js +++ b/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 } diff --git a/src/case/button/treeitem/item.last.treeleaf.js b/src/case/button/treeitem/item.last.treeleaf.js index 596873a2c..718379be4 100644 --- a/src/case/button/treeitem/item.last.treeleaf.js +++ b/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 } diff --git a/src/case/checkbox/check.last.treenode.js b/src/case/checkbox/check.last.treenode.js index c4f996960..58bb22f3d 100644 --- a/src/case/checkbox/check.last.treenode.js +++ b/src/case/checkbox/check.last.treenode.js @@ -5,7 +5,7 @@ */ BI.LastTreeNodeCheckbox = BI.inherit(BI.IconButton, { _defaultConfig: function () { - return BI.extend( BI.LastTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), { + return BI.extend(BI.LastTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), { extraCls: "tree-collapse-icon-type4", iconWidth: 24, iconHeight: 24 @@ -17,10 +17,10 @@ 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"); + if (v === true) { + this.element.addClass("tree-expand-icon-type4"); } else { - this.element.removeClass("tree-expand-icon-type3"); + this.element.removeClass("tree-expand-icon-type4"); } } }); diff --git a/src/widget/multilayersingletree/multilayersingletree.leveltree.js b/src/widget/multilayersingletree/multilayersingletree.leveltree.js index dd168b385..bba61208f 100644 --- a/src/widget/multilayersingletree/multilayersingletree.leveltree.js +++ b/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; + extend.type = "bi.multilayer_single_tree_mid_plus_group_node"; + 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); + self._formatItems(node.children, layer + 1, node); } 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"; + 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); } diff --git a/src/widget/multilayersingletree/node/node.first.plus.js b/src/widget/multilayersingletree/node/node.first.plus.js index e81c9a6b0..a5d053a59 100644 --- a/src/widget/multilayersingletree/node/node.first.plus.js +++ b/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 }); diff --git a/src/widget/multilayersingletree/node/node.last.plus.js b/src/widget/multilayersingletree/node/node.last.plus.js index f6e77743c..ffdb62dda 100644 --- a/src/widget/multilayersingletree/node/node.last.plus.js +++ b/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 }); diff --git a/src/widget/multilayersingletree/node/node.mid.plus.js b/src/widget/multilayersingletree/node/node.mid.plus.js index f9cdf83ea..482917bef 100644 --- a/src/widget/multilayersingletree/node/node.mid.plus.js +++ b/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 }); diff --git a/src/widget/multilayersingletree/node/node.plus.js b/src/widget/multilayersingletree/node/node.plus.js new file mode 100644 index 000000000..93d60c58c --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js index be4d0c2ee..3537b4f34 100644 --- a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js +++ b/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 }); diff --git a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js index 459dccd75..5a66b762c 100644 --- a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js +++ b/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 }); diff --git a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js index 56c8f1ab7..86372cda4 100644 --- a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js +++ b/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 });