forked from fanruan/fineui
Browse Source
* commit '5bd2652f66d0f219ee7ef1a32997dbc2115f9a73': KERNEL-10683 && DESIGN-4160 feat: 整理简化FIneUI树控件的node和item,同时支持父节点不可选中但可以展开收起功能 KERNEL-10683 && DESIGN-4160 feat: 整理简化FIneUI树控件的node和item,同时支持父节点不可选中但可以展开收起功能es6
superman
2 years ago
13 changed files with 584 additions and 374 deletions
@ -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); |
||||
@ -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); |
||||
@ -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); |
||||
Loading…
Reference in new issue