Tree 树形控件

开发指南

何时使用

文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

基本

最简单的用法,展示可展开,可选中,可勾选,可编辑,可右键,禁用,禁用勾选,默认展开,默认选中,默认勾选等功能。

使用数据直接生成

使用 dataSource 生成树结构,除设置 key, label, children 属性外,还可传入 TreeNode 的其他属性,包括 selectable,disabled,checkable, checkboxDisabled, isLeaf 等。

带线样式

展示 Tree 组件带线的样式外观。

树节点占满一行

可以通过设置 isNodeBlock 为 true,来让树节点占满一行,isNodeBlock 也可传入一个对象,支持设置 defaultPaddingLeft(默认的左内边距)和 indent (缩进距离),另外注意 showLine  在开启 isNodeBlock 时失效。

父子节点选中是否关联

展示父子节点选中是否关联的用法。

可搜索的树

展示可搜索的树。

异步加载数据

点击展开节点,动态加载数据。

拖动

将节点拖拽到其他节点内部或前后。

API

Tree

参数说明类型默认值
children树节点ReactNode-
dataSource数据源,该属性优先级高于 childrenArray-
showLine是否显示树的线Booleanfalse
selectable是否支持选中节点Booleantrue
selectedKeys(用于受控)当前选中节点 key 的数组Array<String>-
defaultSelectedKeys(用于非受控)默认选中节点 key 的数组Array<String>[]
onSelect选中或取消选中节点时触发的回调函数

签名:
Function(selectedKeys: Array, extra: Object) => void
参数:
selectedKeys: {Array} 选中节点key的数组
extra: {Object} 额外参数
extra.selectedNodes: {Array} 选中节点的数组
extra.node: {Object} 当前操作的节点
extra.selected: {Boolean} 当前操作是否是选中
Functionfunc.noop
multiple是否支持多选Booleanfalse
checkable是否支持勾选节点的复选框Booleanfalse
checkedKeys(用于受控)当前勾选复选框节点 key 的数组或 {checked: Array, indeterminate: Array} 的对象Array<String>/Object-
defaultCheckedKeys(用于非受控)默认勾选复选框节点 key 的数组Array<String>[]
checkStrictly勾选节点复选框是否完全受控(父子节点选中状态不再关联)Booleanfalse
checkedStrategy定义选中时回填的方式

可选值:
'all'(返回所有选中的节点)
'parent'(父子节点都选中时只返回父节点)
'child'(父子节点都选中时只返回子节点)
Enum'all'
onCheck勾选或取消勾选复选框时触发的回调函数

签名:
Function(checkedKeys: Array, extra: Object) => void
参数:
checkedKeys: {Array} 勾选复选框节点key的数组
extra: {Object} 额外参数
extra.checkedNodes: {Array} 勾选复选框节点的数组
extra.checkedNodesPositions: {Array} 包含有勾选复选框节点和其位置的对象的数组
extra.indeterminateKeys: {Array} 半选复选框节点 key 的数组
extra.node: {Object} 当前操作的节点
extra.checked: {Boolean} 当前操作是否是勾选
Functionfunc.noop
expandedKeys(用于受控)当前展开的节点 key 的数组Array<String>-
defaultExpandedKeys(用于非受控)默认展开的节点 key 的数组Array<String>[]
defaultExpandAll是否默认展开所有节点Booleanfalse
autoExpandParent是否自动展开父节点Booleantrue
onExpand展开或收起节点时触发的回调函数

签名:
Function(expandedKeys: Array, extra: Object) => void
参数:
expandedKeys: {Array} 展开的节点key的数组
extra: {Object} 额外参数
extra.node: {Object} 当前操作的节点
extra.expanded: {Boolean} 当前操作是否是展开
Functionfunc.noop
editable是否支持编辑节点内容Booleanfalse
onEditFinish编辑节点内容完成时触发的回调函数

签名:
Function(key: String, label: String, node: Object) => void
参数:
key: {String} 编辑节点的 key
label: {String} 编辑节点完成时节点的文本
node: {Object} 当前编辑的节点
Functionfunc.noop
draggable是否支持拖拽节点Booleanfalse
onDragStart开始拖拽节点时触发的回调函数

签名:
Function(info: Object) => void
参数:
info: {Object} 拖拽信息
info.event: {Object} 事件对象
info.node: {Object} 拖拽的节点
Functionfunc.noop
onDragEnter拖拽节点进入目标节点时触发的回调函数

签名:
Function(info: Object) => void
参数:
info: {Object} 拖拽信息
info.event: {Object} 事件对象
info.node: {Object} 目标节点
info.expandedKeys: {Array} 当前展开的节点key的数组
Functionfunc.noop
onDragOver拖拽节点在目标节点上移动的时候触发的回调函数

签名:
Function(info: Object) => void
参数:
info: {Object} 拖拽信息
info.event: {Object} 事件对象
info.node: {Object} 目标节点
Functionfunc.noop
onDragLeave拖拽节点离开目标节点时触发的回调函数

签名:
Function(info: Object) => void
参数:
info: {Object} 拖拽信息
info.event: {Object} 事件对象
info.node: {Object} 目标节点
Functionfunc.noop
onDragEnd拖拽节点拖拽结束时触发的回调函数

签名:
Function(info: Object) => void
参数:
info: {Object} 拖拽信息
info.event: {Object} 事件对象
info.node: {Object} 目标节点
Functionfunc.noop
onDrop拖拽节点放入目标节点内或前后触发的回调函数

签名:
Function(info: Object) => void
参数:
info: {Object} 拖拽信息
info.event: {Object} 事件对象
info.node: {Object} 目标节点
info.dragNode: {Object} 拖拽的节点
info.dragNodesKeys: {Array} 拖拽的节点和其子节点 key 的数组
info.dropPosition: {Number} 放置位置,-1代表当前节点前,0代表当前节点里,1代表当前节点后
Functionfunc.noop
canDrop节点是否可被作为拖拽的目标节点

签名:
Function(info: Object) => Boolean
参数:
info: {Object} 拖拽信息
info.node: {Object} 目标节点
info.dragNode: {Object} 拖拽的节点
info.dragNodesKeys: {Array} 拖拽的节点和其子节点 key 的数组
info.dropPosition: {Number} 放置位置,-1代表当前节点前,0代表当前节点里,1代表当前节点后
返回值:
{Boolean} 是否可以被当作目标节点
Function() => true
loadData异步加载数据的函数

签名:
Function(node: Object) => void
参数:
node: {Object} 被点击展开的节点
Function-
filterTreeNode按需筛选高亮节点

签名:
Function(node: Object) => Boolean
参数:
node: {Object} 待筛选的节点
返回值:
{Boolean} 是否被筛选中
Function-
onRightClick右键点击节点时触发的回调函数

签名:
Function(info: Object) => void
参数:
info: {Object} 信息对象
info.event: {Object} 事件对象
info.node: {Object} 点击的节点
Functionfunc.noop
isLabelBlock设置节点是否占满剩余空间,一般用于统一在各节点右侧添加元素(借助 flex 实现,暂时只支持 ie10+)Booleanfalse
isNodeBlock设置节点是否占满一行Boolean/Objectfalse
animation是否开启展开收起动画Booleantrue
focusedKey当前获得焦点的子菜单或菜单项 key 值String-

Tree.Node

参数说明类型默认值
children树节点ReactNode-
label节点文本内容ReactNode'---'
selectable单独设置是否支持选中,覆盖 Tree 的 selectableBoolean-
checkable单独设置是否出现复选框,覆盖 Tree 的 checkableBoolean-
editable单独设置是否支持编辑,覆盖 Tree 的 editableBoolean-
draggable单独设置是否支持拖拽,覆盖 Tree 的 draggableBoolean-
disabled是否禁止节点响应Booleanfalse
checkboxDisabled是否禁止勾选节点复选框Booleanfalse
isLeaf是否是叶子节点,设置loadData时生效Booleanfalse

可以为 Tree.Node 设置 key 值:<TreeNode key="102894" label="女装" />,一般为数据的 id 值,但必需保证其全局唯一性,key 的默认值为 Tree 内部计算出的位置字符串。