Browse Source

KERNEL-10683 && DESIGN-4160 feat: 整理简化FIneUI树控件的node和item,同时支持父节点不可选中但可以展开收起功能

es6
zsmj 2 years ago
parent
commit
f2235049c2
  1. 26
      demo/config.js
  2. 5
      demo/js/case/tree/demo.level_tree.js
  3. 2
      demo/js/widget/tree/demo.multilayer_select_level_tree.js
  4. 2
      demo/js/widget/tree/demo.multilayer_single_level_tree.js
  5. 59
      src/case/button/node/siwtcher.tree.node.js
  6. 106
      src/case/button/node/treenode.js
  7. 90
      src/case/button/treeitem/treeitem.js
  8. 34
      src/case/tree/tree.level.js
  9. 3
      src/case/tree/treeexpander/tree.expander.js
  10. 4
      src/case/tree/treeexpander/tree.expander.popup.js
  11. 24
      src/widget/multilayerselecttree/multilayerselecttree.leveltree.js
  12. 25
      src/widget/multilayersingletree/multilayersingletree.leveltree.js
  13. 55
      src/widget/selecttree/selecttree.popup.js

26
demo/config.js

@ -1518,24 +1518,24 @@ Demo.CONSTANTS = {
}, { pId: "0_1_33", id: "0_1_33_0", text: "重庆市区", value: "重庆市区", open: true }], }, { pId: "0_1_33", id: "0_1_33_0", text: "重庆市区", value: "重庆市区", open: true }],
TREE: [{ id: -1, pId: -2, value: "根目录", text: "根目录" }, TREE: [{ id: -1, pId: -2, value: "根目录", text: "根目录" },
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"}, { id: 1, pId: -1, value: "1", text: "第一级目录1", disabled: true },
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"}, { id: 11, pId: 1, value: "11", text: "第二级文件1" },
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"}, { id: 12, pId: 1, value: "12", text: "第二级目录2" },
{id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"}, { id: 121, pId: 12, value: "121", text: "第三级目录1" },
{id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"}, { id: 122, pId: 12, value: "122", text: "第三级文件1" },
{id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"}, { id: 1211, pId: 121, value: "1211", text: "第四级目录1" },
{ {
id: 12111, id: 12111,
pId: 1211, pId: 1211,
value: "第五级文件1", value: "12111",
text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
}, },
{id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"}, { id: 2, pId: -1, value: "2", text: "第一级目录2" },
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"}, { id: 21, pId: 2, value: "21", text: "第二级目录3" },
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"}, { id: 22, pId: 2, value: "22", text: "第二级文件2" },
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"}, { id: 211, pId: 21, value: "211", text: "第三级目录2" },
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"}, { id: 212, pId: 21, value: "212", text: "第三级文件2" },
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}], { id: 2111, pId: 211, value: "2111", text: "第四级文件1" }],
LEVELTREE: [{ LEVELTREE: [{
id: 1, id: 1,
text: "第一项", text: "第一项",

5
demo/js/case/tree/demo.level_tree.js

@ -42,6 +42,11 @@ Demo.Func = BI.inherit(BI.Widget, {
pId: 1, pId: 1,
text: "子项3", text: "子项3",
value: 13 value: 13
}, {
id: 111,
pId: 11,
text: "子项1-1",
value: 111
}, { }, {
id: 21, id: 21,
pId: 2, pId: 2,

2
demo/js/widget/tree/demo.multilayer_select_level_tree.js

@ -33,7 +33,7 @@ Demo.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, {
height: 25, height: 25,
text: "setValue (第二级文件1)", text: "setValue (第二级文件1)",
handler: function () { handler: function () {
tree.setValue(["第二级文件1"]); tree.setValue(["11"]);
} }
}, },
height: 25 height: 25

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

@ -49,7 +49,7 @@ Demo.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
{ id: -1, pId: 0, value: "根目录", text: "根目录" }, { id: -1, pId: 0, value: "根目录", text: "根目录" },
{ id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1" }, { id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1" },
{ id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1" }, { id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1" },
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"}, { id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2", disabled: true },
{ id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1" }, { id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1" },
{ id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1" }, { id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1" },
{ id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1" }, { id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1" },

59
src/case/button/node/siwtcher.tree.node.js

@ -0,0 +1,59 @@
BI.TreeNodeSwitcher = BI.inherit(BI.NodeButton, {
_defaultConfig: function () {
return BI.extend(BI.TreeNodeSwitcher.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-tree-node-switcher",
iconWidth: 24,
iconHeight: 24,
isFirstNode: false,
isLastNode: false,
layer: 0
});
},
render: function () {
const [collapse, expand] = this.getIconCls();
return {
type: "bi.icon_label",
iconWidth: this.options.iconWidth,
iconHeight: this.options.iconHeight,
cls: this.options.open ? expand : collapse,
};
},
getIconCls: function () {
var options = this.options;
if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
// 只有一层,并且是第一个节点,并且是最后一个节点
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"];
} else if (options.layer === 0 && options.isFirstNode) {
// 第一层,并且是第一个节点
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type2", "tree-solid-expand-icon-type2"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"];
} else if (options.isLastNode) {
// 最后一个节点
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type4", "tree-solid-expand-icon-type4"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"];
} else {
// 其他情况
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type3", "tree-solid-expand-icon-type3"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"];
}
},
setOpened: function (b) {
BI.TreeNodeSwitcher.superclass.setOpened.apply(this, arguments);
const [collapse, expand] = this.getIconCls();
if (b) {
this.element.addClass(expand).removeClass(collapse);
} else {
this.element.addClass(collapse).removeClass(expand);
}
},
doClick: function () {
BI.TreeNodeSwitcher.superclass.doClick.apply(this, arguments);
this.fireEvent(BI.TreeNodeSwitcher.EVENT_CHANGE, this);
}
});
BI.TreeNodeSwitcher.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.tree_node_switcher", BI.TreeNodeSwitcher);

106
src/case/button/node/treenode.js

@ -0,0 +1,106 @@
BI.BasicTreeNode = BI.inherit(BI.NodeButton, {
_defaultConfig: function (props) {
var conf = BI.BasicTreeNode.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-tree-node " + (props.selectable ? "bi-list-item-active" : "bi-list-item"),
id: "",
pId: "",
open: false,
height: 24,
readonly: true,
isFirstNode: false,
isLastNode: false,
switcherIcon: {},
selectable: true,
disabled: false, // disabled不会影响展开收起功能
});
},
render: function () {
var self = this, o = this.options;
const checkbox = {
type: "bi.tree_node_switcher",
__ref: function (_ref) {
self.switcher = _ref;
},
iconHeight: o.height,
iconWidth: o.iconWrapperWidth || o.height,
open: o.open,
isFirstNode: o.isFirstNode,
isLastNode: o.isLastNode,
layer: o.layer,
...o.switcherIcon,
stopPropagation: o.selectable,
mounted: function () {
this.setEnable(true);
},
listeners: [
{
eventName: "EVENT_CHANGE",
action: () => {
if (!this.isEnabled() || o.selectable) {
this.isOpened() ? this.triggerCollapse() : this.triggerExpand();
}
}
}
]
};
return {
type: "bi.vertical_adapt",
columnSize: [o.iconWrapperWidth || o.height, "fill"],
items: [
{
el: checkbox,
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半
}, {
el: {
type: "bi.label",
ref: function (_ref) {
self.text = _ref;
},
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap || o.textHgap,
vgap: o.textVgap,
lgap: o.textLgap,
rgap: o.textRgap,
text: o.text,
value: o.value,
keyword: o.keyword,
py: o.py
}
}
]
};
},
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
unRedMark: function () {
this.text.unRedMark.apply(this.text, arguments);
},
doClick: function () {
if (this.options.selectable) {
return;
}
BI.BasicTreeNode.superclass.doClick.apply(this, arguments);
},
setOpened: function (v) {
BI.BasicTreeNode.superclass.setOpened.apply(this, arguments);
this.switcher.setOpened(v);
},
setValue: function () {
BI.BasicTreeNode.superclass.setValue.apply(this, arguments);
}
});
BI.shortcut("bi.tree_node", BI.BasicTreeNode);

90
src/case/button/treeitem/treeitem.js

@ -0,0 +1,90 @@
BI.BasicTreeItem = BI.inherit(BI.NodeButton, {
_defaultConfig: function () {
var conf = BI.BasicTreeItem.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-tree-item bi-list-item-active",
id: "",
pId: "",
height: 24,
readonly: true,
isFirstNode: false,
isLastNode: false,
switcherIcon: {},
selectable: true,
disabled: false, // disabled不会影响展开收起功能
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.vertical_adapt",
columnSize: ["", "fill"],
items: [
{
el: {
type: "bi.layout",
width: 24,
height: o.height,
width: o.height,
cls: this.getLineCls(),
},
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半
},
{
el: {
type: "bi.label",
ref: function (_ref) {
self.text = _ref;
},
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap || o.textHgap,
vgap: o.textVgap,
lgap: o.textLgap,
rgap: o.textRgap,
text: o.text,
value: o.value,
keyword: o.keyword,
py: o.py
},
}
]
};
},
getLineCls: function () {
var options = this.options;
if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
return "";
} else if (options.layer === 0 && options.isFirstNode) {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "first-solid-line-conn-background" : "first-line-conn-background";
} else if (options.isLastNode) {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "last-solid-line-conn-background" : "last-line-conn-background";
} else {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "mid-solid-line-conn-background" : "mid-line-conn-background";
}
},
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
unRedMark: function () {
this.text.unRedMark.apply(this.text, arguments);
},
getId: function () {
return this.options.id;
},
getPId: function () {
return this.options.pId;
}
});
BI.shortcut("bi.tree_item", BI.BasicTreeItem);

34
src/case/tree/tree.level.js

@ -26,33 +26,24 @@ BI.LevelTree = BI.inherit(BI.Widget, {
_formatItems: function (nodes, layer, pNode) { _formatItems: function (nodes, layer, pNode) {
var self = this; var self = this;
BI.each(nodes, function (i, node) { BI.each(nodes, function (i, node) {
var extend = { layer: layer, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT }; var extend = {
layer: layer,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
isFirstNode: i === 0,
isLastNode: i === nodes.length - 1,
};
if (!BI.isKey(node.id)) { if (!BI.isKey(node.id)) {
node.id = BI.UUID(); node.id = BI.UUID();
} }
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.mid_plus_group_node"; extend.type = "bi.tree_node";
if (i === nodes.length - 1) { extend.selectable = false;
extend.type = "bi.last_plus_group_node";
extend.isLastNode = true;
}
if (i === 0 && !pNode) {
extend.type = "bi.first_plus_group_node";
}
if (i === 0 && i === nodes.length - 1) { // 根
extend.type = "bi.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.mid_tree_leaf_item"; extend.type = "bi.tree_item";
if (i === 0 && !pNode) {
extend.type = "bi.first_tree_leaf_item";
}
if (i === nodes.length - 1) {
extend.type = "bi.last_tree_leaf_item";
}
BI.defaults(node, extend); BI.defaults(node, extend);
} }
}); });
@ -76,12 +67,14 @@ BI.LevelTree = BI.inherit(BI.Widget, {
type: "bi.custom_tree", type: "bi.custom_tree",
element: this, element: this,
expander: BI.extend({ expander: BI.extend({
type: "bi.tree_expander",
el: {}, el: {},
isDefaultInit: false,
selectable: false,
popup: { popup: {
type: "bi.custom_tree" type: "bi.custom_tree"
} }
}, o.expander), }, o.expander),
items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0),
value: o.value, value: o.value,
@ -97,6 +90,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) { if (type === BI.Events.CLICK) {
self.fireEvent(BI.LevelTree.EVENT_CHANGE, value, ob); self.fireEvent(BI.LevelTree.EVENT_CHANGE, value, ob);
self.setValue(value);
} }
}); });
}, },

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

@ -59,7 +59,8 @@
getValue: function () { getValue: function () {
if (this.trigger.isSelected()) { if (this.trigger.isSelected()) {
return [this.trigger.getValue()]; var value = this.trigger.getValue();
return BI.isArray(value) ? value : [value];
} }
return this.expander.getValue(); return this.expander.getValue();
}, },

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

@ -40,11 +40,11 @@
}, },
getValue: function () { getValue: function () {
return this.popupview.getValue(); return this.popupView.getValue();
}, },
populate: function (items) { populate: function (items) {
this.popupview.populate(items); this.popupView.populate(items);
}, },
getAllLeaves: function () { getAllLeaves: function () {

24
src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@ -44,30 +44,12 @@ 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.tree_node";
if (layer === 0 && extend.isFirstNode && extend.isLastNode) { extend.selectable = true;
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.tree_item";
if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
extend.type = "bi.root_tree_leaf_item";
} else if (layer === 0 && extend.isFirstNode) {
extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
} else if (extend.isLastNode) {
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);
} }
}); });

25
src/widget/multilayersingletree/multilayersingletree.leveltree.js

@ -44,31 +44,12 @@ 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.tree_node";
if (layer === 0 && extend.isFirstNode && extend.isLastNode) { extend.selectable = false;
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.tree_item";
if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
extend.type = "bi.root_tree_leaf_item";
} else if (layer === 0 && extend.isFirstNode) {
extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
} else if (extend.isLastNode) {
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);
} }
}); });

55
src/widget/selecttree/selecttree.popup.js

@ -17,32 +17,40 @@ BI.SelectTreePopup = BI.inherit(BI.Pane, {
_formatItems: function (nodes, layer, pNode) { _formatItems: function (nodes, layer, pNode) {
var self = this; var self = this;
BI.each(nodes, function (i, node) { BI.each(nodes, function (i, node) {
var extend = {layer: layer}; var extend = {
layer: layer,
isFirstNode: i === 0,
isLastNode: i === nodes.length - 1,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
pNode: pNode,
};
node.id = node.id || BI.UUID(); node.id = node.id || BI.UUID();
extend.pNode = pNode;
extend.height = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
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.select_tree_mid_plus_group_node";
if (i === nodes.length - 1) { extend.type = "bi.tree_node";
extend.type = "bi.select_tree_last_plus_group_node"; extend.selectable = true;
extend.isLastNode = true; // if (i === nodes.length - 1) {
} // extend.type = "bi.select_tree_last_plus_group_node";
if (i === 0 && !pNode) { // extend.isLastNode = true;
extend.type = "bi.select_tree_first_plus_group_node" // }
} // if (i === 0 && !pNode) {
if (i === 0 && i === nodes.length - 1) { // 根 // extend.type = "bi.select_tree_first_plus_group_node";
extend.type = "bi.select_tree_plus_group_node"; // }
} // if (i === 0 && i === nodes.length - 1) { // 根
// extend.type = "bi.select_tree_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.mid_tree_leaf_item"; extend.type = "bi.tree_item";
if (i === 0 && !pNode) { // extend.type = "bi.mid_tree_leaf_item";
extend.type = "bi.first_tree_leaf_item" // if (i === 0 && !pNode) {
} // extend.type = "bi.first_tree_leaf_item";
if (i === nodes.length - 1) { // }
extend.type = "bi.last_tree_leaf_item"; // if (i === nodes.length - 1) {
} // extend.type = "bi.last_tree_leaf_item";
// }
BI.defaults(node, extend); BI.defaults(node, extend);
} }
}); });
@ -57,8 +65,9 @@ BI.SelectTreePopup = BI.inherit(BI.Pane, {
this.tree = BI.createWidget({ this.tree = BI.createWidget({
type: "bi.level_tree", type: "bi.level_tree",
expander: { expander: {
type: "bi.select_tree_expander", type: "bi.tree_expander",
isDefaultInit: true // isDefaultInit: true,
selectable: true,
}, },
items: this._formatItems(BI.Tree.transformToTreeFormat(o.items), 0), items: this._formatItems(BI.Tree.transformToTreeFormat(o.items), 0),
value: o.value, value: o.value,

Loading…
Cancel
Save