You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design/components/tree/index.en-US.md

64 lines
4.5 KiB
Markdown

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

---
category: Components
type: Data Display
title: Tree
---
## When To Use
Directory, organization, biological classification, country, and etc. Almost things of the world are tree structure. The `Tree` component is a way of representing the hierarchical relationship of these thingsand you also can expand, collapse, select the treeNodes of it.
## API
### Tree props
| Property | Description | Type | Default |
|----------------|--------------------------------------------------|------------|---------|
|multiple | Whether allow to select multiple treeNodes | bool | false |
|checkable | Whether support add Checkbox before treeNode | bool | false |
|defaultExpandAll | Whether default to expand all treeNodes | bool | false |
|defaultExpandedKeys | Specify keys of default expanded treeNodes | String[] | [] |
|expandedKeys |(controlled) Specifies keys of expanded treeNodes | String[] | [] |
|autoExpandParent | Whether to automatically expand a parent treeNode | bool | true |
|defaultCheckedKeys | Specifies keys of default checked treeNodes | String[] | [] |
|checkedKeys |(controlled) Specifies keys of checked treeNodesPS When specifies a key of treeNode which is a parent treeNode, all children treeNodes of its will be checked; And vice versa, when specifies a key of treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, it'a object has `checked` and `halfChecked` property, and no matter child treeNode or parent treeNode is checked, they won't impact on eachother. | String[]/{checked:Array<String>,halfChecked:Array<String>} | [] |
|checkStrictly| Check treeNode precisely, parent treeNode and children treeNodes are not associated | bool | false |
|defaultSelectedKeys | Specifies keys of default selected treeNodes | String[] | [] |
|selectedKeys |(controlled) Specifies keys of selected treeNode | String[] | - |
|onExpand | Defines a function will be called when expand or collapse a treeNode | function(expandedKeys, {expanded: bool, node}) | - |
|onCheck | Defines a function will be called when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|onSelect | The callback will be invoked when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|filterTreeNode | Defines a function to filter treeNodeshighlightwhen return true, corresponding treeNode will be highlight | function(node) | - |
|loadData | load data asynchronously | function(node)| - |
|onRightClick | The call back will be invoked when the user right clicks a treeNode | function({event,node}) | - |
|draggable | Specifies whether this Tree is draggableIE>8 | bool | false |
|onDragStart | Defines a function will be called when the onDragStart event occurs | function({event,node}) | - |
|onDragEnter | Defines a function will be called when the onDragEnter event occurs | function({event,node,expandedKeys}) | - |
|onDragOver | Defines a function will be called when the onDragOver event occurs | function({event,node}) | - |
|onDragLeave | Defines a function will be called when the onDragLeave event occurs | function({event,node}) | - |
|onDragEnd | Defines a function will be called when the onDragEnd event occurs | function({event,node}) | - |
|onDrop | Defines a function will be called when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
### TreeNode props
| Property | Description | Type | Default |
|-----------|------------------------------------------|---------|---------|
|disabled | whether disabled the treeNode | bool | false |
|disableCheckbox | whether disable the checkbox of treeNode | bool | false |
|title | title | String/element | '---' |
|key | it's 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 |
|isLeaf | whether it's leaf node | bool | false |
## Note
The number of treeNodes can be very large, but when enable `checkable`,
it will spend more computing time, so we cache some calculations (e.g. `this.treeNodesStates`),
to avoid double computing. But, this bring some restrictions,
**when you load treeNodes asynchronously, you should render tree like this**
```jsx
{this.state.treeData.length
? <Tree>{this.state.treeData.map(data => <TreeNode />)}</Tree>
: 'loading tree'}
```