ant-design/components/tree/index.en-US.md
2017-10-31 13:57:45 +08:00

4.7 KiB

category type title
Components Data Display Tree

When To Use

Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.

API

Tree props

Property Description Type Default
autoExpandParent Whether to automatically expand a parent treeNode boolean true
checkable Adds a Checkbox before the treeNodes boolean false
checkedKeys (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When checkable and checkStrictly is true, its object has checked and halfChecked property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. string[] | {checked: string[], halfChecked: string[]} []
checkStrictly Check treeNode precisely; parent treeNode and children treeNodes are not associated boolean false
defaultCheckedKeys Specifies the keys of the default checked treeNodes string[] []
defaultExpandAll Whether to expand all treeNodes by default boolean false
defaultExpandedKeys Specify the keys of the default expanded treeNodes string[] []
defaultSelectedKeys Specifies the keys of the default selected treeNodes string[] []
draggable Specifies whether this Tree is draggable (IE > 8) boolean false
expandedKeys (Controlled) Specifies the keys of the expanded treeNodes string[] []
filterTreeNode Defines a function to filter (highlight) treeNodes. When the function returns true, the corresponding treeNode will be highlighted function(node) -
loadData Load data asynchronously function(node) -
multiple Allows selecting multiple treeNodes boolean false
selectedKeys (Controlled) Specifies the keys of the selected treeNodes string[] -
showIcon Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true boolean false
showLine Shows a connecting line boolean false
onCheck Callback function for when the onCheck event occurs function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) -
onDragEnd Callback function for when the onDragEnd event occurs function({event, node}) -
onDragEnter Callback function for when the onDragEnter event occurs function({event, node, expandedKeys}) -
onDragLeave Callback function for when the onDragLeave event occurs function({event, node}) -
onDragOver Callback function for when the onDragOver event occurs function({event, node}) -
onDragStart Callback function for when the onDragStart event occurs function({event, node}) -
onDrop Callback function for when the onDrop event occurs function({event, node, dragNode, dragNodesKeys}) -
onExpand Callback function for when a treeNode is expanded or collapsed function(expandedKeys, {expanded: bool, node}) -
onRightClick Callback function for when the user right clicks a treeNode function({event, node}) -
onSelect Callback function for when the user clicks a treeNode function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) -

TreeNode props

Property Description Type Default
disableCheckbox Disables the checkbox of the treeNode boolean false
disabled Disables the treeNode boolean false
selectable Set whether the treeNode can be selected boolean true
isLeaf Determines if this is a leaf node(effective when loadData is specified) boolean false
key Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! string internal calculated position of treeNode
title Title string|ReactNode '---'

Note

The number of treeNodes can be very large, but when checkable=true, it will increase the compute time. So, we cache some calculations (e.g. this.treeNodesStates) to avoid double computing. But, this brings some restrictions. When you load treeNodes asynchronously, you should render tree like this:

{this.state.treeData.length
  ? <Tree>{this.state.treeData.map(data => <TreeNode />)}</Tree>
  : 'loading tree'}