Browse Source

Pull request #1559: KERNEL-5989 refactor:fineui tree重构

Merge in VISUAL/fineui from ~DAILER/fineui:feature/树控件 to master

* commit 'f5ad3b444933880a9be6ed67cf7bdaef022b6848':
  KERNEL-5989 refactor:fineui tree重构
  KERNEL-5989 refactor:fineui tree重构
es6
parent
commit
93819803fc
  1. 4
      src/case/tree/tree.level.js
  2. 72
      src/case/tree/treeexpander/tree.expander.js
  3. 47
      src/case/tree/treeexpander/tree.expander.popup.js
  4. 9
      src/less/base/tree/tree.expander.less
  5. 40
      src/widget/multilayerselecttree/multilayerselecttree.leveltree.js
  6. 26
      src/widget/multilayerselecttree/node/node.first.plus.js
  7. 19
      src/widget/multilayerselecttree/node/node.last.plus.js
  8. 19
      src/widget/multilayerselecttree/node/node.mid.plus.js
  9. 19
      src/widget/multilayerselecttree/node/node.plus.js
  10. 36
      src/widget/multilayersingletree/multilayersingletree.leveltree.js
  11. 19
      src/widget/multilayersingletree/node/node.first.plus.js
  12. 19
      src/widget/multilayersingletree/node/node.last.plus.js
  13. 19
      src/widget/multilayersingletree/node/node.mid.plus.js
  14. 20
      src/widget/multilayersingletree/treeitem/item.first.treeleaf.js
  15. 19
      src/widget/multilayersingletree/treeitem/item.last.treeleaf.js
  16. 19
      src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js

4
src/case/tree/tree.level.js

@ -38,7 +38,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
extend.isLastNode = true; extend.isLastNode = true;
} }
if (i === 0 && !pNode) { if (i === 0 && !pNode) {
extend.type = "bi.first_plus_group_node" extend.type = "bi.first_plus_group_node";
} }
if (i === 0 && i === nodes.length - 1) { // 根 if (i === 0 && i === nodes.length - 1) { // 根
extend.type = "bi.plus_group_node"; extend.type = "bi.plus_group_node";
@ -48,7 +48,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
} else { } else {
extend.type = "bi.mid_tree_leaf_item"; extend.type = "bi.mid_tree_leaf_item";
if (i === 0 && !pNode) { if (i === 0 && !pNode) {
extend.type = "bi.first_tree_leaf_item" extend.type = "bi.first_tree_leaf_item";
} }
if (i === nodes.length - 1) { if (i === nodes.length - 1) {
extend.type = "bi.last_tree_leaf_item"; extend.type = "bi.last_tree_leaf_item";

72
src/case/tree/treeexpander/tree.expander.js

@ -0,0 +1,72 @@
!(function () {
var Widget = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-tree-expander",
layer: 0, // 第几层级
isLastNode: false, // 是不是最后一个
isFirstNode: false, // 是不是第一个
selectable: false,
},
render: function () {
var self = this;
var o = this.options;
this.trigger = BI.createWidget(o.el, {
forceNotSelected: !o.selectable,
});
this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) {
o.selectable && self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
return {
type: "bi.expander",
ref: function (_ref) {
self.expander = _ref;
},
trigger: o.selectable ? "" : "click",
el: this.trigger,
isDefaultInit: o.isDefaultInit,
popup: {
type: "bi.tree_expander.popup",
layer: o.layer || o.el.layer,
isLastNode: o.isLastNode || o.el.isLastNode,
isFirstNode: o.isFirstNode || o.el.isFirstNode,
el: o.popup,
},
listeners: [
{
eventName: BI.Controller.EVENT_CHANGE,
action: function (type) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
},
},
],
};
},
setValue: function (v) {
if (BI.contains(v, this.trigger.getValue())) {
this.trigger.setSelected(true);
this.expander.setValue([]);
} else {
this.trigger.setSelected(false);
this.expander.setValue(v);
}
},
getValue: function () {
if (this.trigger.isSelected()) {
return [this.trigger.getValue()];
}
return this.expander.getValue();
},
populate: function (items) {
this.expander.populate(items);
},
});
BI.shortcut("bi.tree_expander", Widget);
}());

47
src/case/tree/treeexpander/tree.expander.popup.js

@ -0,0 +1,47 @@
!(function () {
var Widget = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-tree-expander-popup",
layer: 0, // 第几层级
el: {},
isLastNode: false,
},
render: function () {
var self = this;
var o = this.options;
this.popupView = BI.createWidget(o.el, this);
this.popupView.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
this.popupView.element.css("margin-left", -12 * o.layer);
this.element.css("margin-left", 12 * o.layer);
return {
type: "bi.vertical",
cls: !o.isLastNode ? "line" : "",
scrolly: null,
items: [
this.popupView,
],
};
},
setValue: function (v) {
this.popupView.setValue(v);
},
getValue: function () {
return this.popupview.getValue();
},
populate: function (items) {
this.popupview.populate(items);
},
});
BI.shortcut("bi.tree_expander.popup", Widget);
}());

9
src/less/base/tree/tree.expander.less

@ -0,0 +1,9 @@
@import "../../index";
.bi-tree-expander-popup.line:before {
position: absolute;
content: "";
border-left: 1px dashed #D0D4DA;
height: 100%;
left: 11px;
}

40
src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@ -32,7 +32,10 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
var self = this, o = this.options; var self = this, o = this.options;
var keyword = o.keywordGetter(); var keyword = o.keywordGetter();
BI.each(nodes, function (i, node) { BI.each(nodes, function (i, node) {
var extend = {}; var extend = {
isFirstNode: i === 0,
isLastNode: i === nodes.length - 1
};
node.layer = layer; node.layer = layer;
if (!BI.isKey(node.id)) { if (!BI.isKey(node.id)) {
node.id = BI.UUID(); node.id = BI.UUID();
@ -40,26 +43,31 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
node.keyword = node.keyword || keyword; node.keyword = node.keyword || keyword;
extend.pNode = pNode; extend.pNode = pNode;
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
extend.type = "bi.multilayer_select_tree_mid_plus_group_node";
if (i === nodes.length - 1) { if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
extend.type = "bi.multilayer_select_tree_last_plus_group_node";
extend.isLastNode = true;
}
if (i === 0 && !pNode) {
extend.type = "bi.multilayer_select_tree_first_plus_group_node";
}
if (i === 0 && i === nodes.length - 1 && !pNode) { // 根
extend.type = "bi.multilayer_select_tree_plus_group_node"; extend.type = "bi.multilayer_select_tree_plus_group_node";
} else if (layer === 0 && extend.isFirstNode) {
extend.type = "bi.multilayer_select_tree_first_plus_group_node";
} else if (extend.isLastNode) {
extend.type = "bi.multilayer_select_tree_last_plus_group_node";
} else {
extend.type = "bi.multilayer_select_tree_mid_plus_group_node";
} }
BI.defaults(node, extend); BI.defaults(node, extend);
self._formatItems(node.children, layer + 1, node); self._formatItems(node.children, layer + 1, node);
} else { } else {
extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
if (i === 0 && !pNode) { if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
extend.type = ""; // todo 缺一个根节点的item
} else if (layer === 0 && extend.isFirstNode) {
extend.type = "bi.multilayer_single_tree_first_tree_leaf_item"; extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
} } else if (extend.isLastNode) {
if (i === nodes.length - 1) {
extend.type = "bi.multilayer_single_tree_last_tree_leaf_item"; extend.type = "bi.multilayer_single_tree_last_tree_leaf_item";
} else {
extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
} }
BI.defaults(node, extend); BI.defaults(node, extend);
} }
@ -83,7 +91,9 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
type: "bi.custom_tree", type: "bi.custom_tree",
cls: "tree-view display-table", cls: "tree-view display-table",
expander: { expander: {
type: "bi.select_tree_expander", // type: "bi.select_tree_expander",
type: "bi.tree_expander",
selectable: true,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
el: {}, el: {},
popup: { popup: {

26
src/widget/multilayerselecttree/node/node.first.plus.js

@ -43,25 +43,19 @@ BI.MultiLayerSelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); 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 = []; var items = [];
BI.count(0, o.layer, function (index) { // 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({ items.push({
type: "bi.layout", el: this.node,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.node);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

19
src/widget/multilayerselecttree/node/node.last.plus.js

@ -43,25 +43,12 @@ BI.MultiLayerSelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); 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 = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.node,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.node);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

19
src/widget/multilayerselecttree/node/node.mid.plus.js

@ -43,25 +43,12 @@ BI.MultiLayerSelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); 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 = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.node,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.node);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

19
src/widget/multilayerselecttree/node/node.plus.js

@ -43,25 +43,12 @@ BI.MultiLayerSelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); 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 = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.node,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.node);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

36
src/widget/multilayersingletree/multilayersingletree.leveltree.js

@ -32,7 +32,10 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
var self = this, o = this.options; var self = this, o = this.options;
var keyword = o.keywordGetter(); var keyword = o.keywordGetter();
BI.each(nodes, function (i, node) { BI.each(nodes, function (i, node) {
var extend = {}; var extend = {
isFirstNode: i === 0,
isLastNode: i === nodes.length - 1
};
node.layer = layer; node.layer = layer;
if (!BI.isKey(node.id)) { if (!BI.isKey(node.id)) {
node.id = BI.UUID(); node.id = BI.UUID();
@ -40,27 +43,31 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
node.keyword = node.keyword || keyword; node.keyword = node.keyword || keyword;
extend.pNode = pNode; extend.pNode = pNode;
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
extend.type = "bi.multilayer_single_tree_mid_plus_group_node";
if (i === nodes.length - 1) { if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
extend.type = "bi.multilayer_single_tree_last_plus_group_node";
extend.isLastNode = true;
}
if (i === 0 && !pNode) {
extend.type = "bi.multilayer_single_tree_first_plus_group_node";
}
if (i === 0 && i === nodes.length - 1 && !pNode) { // 根
extend.type = "bi.multilayer_single_tree_plus_group_node"; extend.type = "bi.multilayer_single_tree_plus_group_node";
} else if (layer === 0 && extend.isFirstNode) {
extend.type = "bi.multilayer_single_tree_first_plus_group_node";
} else if (extend.isLastNode) {
extend.type = "bi.multilayer_single_tree_last_plus_group_node";
} else {
extend.type = "bi.multilayer_single_tree_mid_plus_group_node";
} }
BI.defaults(node, extend); BI.defaults(node, extend);
self._formatItems(node.children, layer + 1, node); self._formatItems(node.children, layer + 1, node);
} else { } else {
extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
if (i === 0 && !pNode) { if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
extend.type = ""; // todo 缺一个根节点的item
} else if (layer === 0 && extend.isFirstNode) {
extend.type = "bi.multilayer_single_tree_first_tree_leaf_item"; extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
} } else if (extend.isLastNode) {
if (i === nodes.length - 1) {
extend.type = "bi.multilayer_single_tree_last_tree_leaf_item"; extend.type = "bi.multilayer_single_tree_last_tree_leaf_item";
} else {
extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
} }
BI.defaults(node, extend); BI.defaults(node, extend);
} }
}); });
@ -83,6 +90,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
type: "bi.custom_tree", type: "bi.custom_tree",
cls: "tree-view display-table", cls: "tree-view display-table",
expander: { expander: {
type: "bi.tree_expander",
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
el: {}, el: {},
popup: { popup: {

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

@ -22,25 +22,12 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
var self = this, o = this.options; var self = this, o = this.options;
this.node = this._createNode(); this.node = this._createNode();
var needBlankLayers = [];
var pNode = o.pNode;
while (pNode) {
if (pNode.isLastNode) {
needBlankLayers.push(pNode.layer)
}
pNode = pNode.pNode;
}
var items = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.node,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.node);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

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

@ -22,25 +22,12 @@ BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
var self = this, o = this.options; var self = this, o = this.options;
this.node = this._createNode(); this.node = this._createNode();
var needBlankLayers = [];
var pNode = o.pNode;
while (pNode) {
if (pNode.isLastNode) {
needBlankLayers.push(pNode.layer)
}
pNode = pNode.pNode;
}
var items = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.node,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.node);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

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

@ -22,25 +22,12 @@ BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
var self = this, o = this.options; var self = this, o = this.options;
this.node = this._createNode(); this.node = this._createNode();
var needBlankLayers = [];
var pNode = o.pNode;
while (pNode) {
if (pNode.isLastNode) {
needBlankLayers.push(pNode.layer)
}
pNode = pNode.pNode;
}
var items = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.node,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.node);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

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

@ -42,26 +42,12 @@ BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); 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 = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.item,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.item);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

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

@ -42,25 +42,12 @@ BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); 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 = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.item,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.item);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

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

@ -42,25 +42,12 @@ BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); 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 = []; var items = [];
BI.count(0, o.layer, function (index) {
items.push({ items.push({
type: "bi.layout", el: this.item,
cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", lgap: o.layer * 12
width: 12,
height: o.height
});
}); });
items.push(this.item);
BI.createWidget({ BI.createWidget({
type: "bi.horizontal_adapt", type: "bi.horizontal_adapt",
element: this, element: this,

Loading…
Cancel
Save