Package Exports
- rc-tree
- rc-tree/assets/index.css
- rc-tree/lib/util
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rc-tree
tree ui component for react
Screenshots
Feature
- support ie8,ie8+,chrome,firefox,safari
Example
http://localhost:8018/examples/
online example: http://react-component.github.io/tree/examples/
install
Usage
see examples
API
Tree props
| name | description | type | default |
|---|---|---|---|
| className | additional css class of root dom node | String | '' |
| prefixCls | prefix class | String | '' |
| showLine | whether show line | bool | true |
| showIcon | whether show icon | bool | true |
| multiple | whether multiple select | bool | false |
| checkable | whether support checked | bool/React Node | false |
| defaultExpandAll | expand all treeNodes | bool | false |
| defaultExpandedKeys | expand specific treeNodes | String[] | - |
| expandedKeys | Controlled expand specific treeNodes | String[] | - |
| autoExpandParent | whether auto expand parent treeNodes | bool | true |
| checkedKeys | Controlled checked treeNodes(After setting, defaultCheckedKeys will not work) | String[] | [] |
| defaultCheckedKeys | default checked treeNodes | String[] | [] |
| selectedKeys | Controlled selected treeNodes(After setting, defaultSelectedKeys will not work) | String[] | [] |
| defaultSelectedKeys | default selected treeNodes | String[] | [] |
| onExpand | fire on treeNode expand or not | function(treeNode, expanded, expandedKeys) | - |
| onCheck | click the treeNode/checkbox to fire | function(e:{checked:bool,node,checkedKeys,event,allCheckedNodesKeys}) | - |
| onSelect | click the treeNode to fire | function(e:{selected:bool,node,selectedKeys,event}) | - |
| filterTreeNode | filter some treeNodes as you need. it should return true | function(treeNode) | - |
| loadData | load data asynchronously and the return value should be a promise | function(node) | - |
| onRightClick | select current treeNode and show customized contextmenu | function({event,node}) | - |
| onMouseEnter | call when mouse enter a treeNode | function({event,node}) | - |
| onMouseLeave | call when mouse leave a treeNode | function({event,node}) | - |
| draggable | whether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.) | bool | false |
| onTreeDragStart | it execs when fire the tree's dragstart event | function({event,node}) | - |
| onTreeDragEnter | it execs when fire the tree's dragenter event | function({event,node,expandedKeys}) | - |
| onTreeDragOver | it execs when fire the tree's dragover event | function({event,node}) | - |
| onTreeDragLeave | it execs when fire the tree's dragleave event | function({event,node}) | - |
| onTreeDrop | it execs when fire the tree's drop event | function({event,node,dragNode,dragNodesKeys}) | - |
TreeNode props
| name | description | type | default |
|---|---|---|---|
| className | additional class to treeNode | String | '' |
| disabled | whether disabled the treeNode | bool | false |
| disableCheckbox | whether disable the treeNode' checkbox | bool | false |
| title | tree/subTree's title | String | '---' |
| key | it's used with tree props's (default)ExpandedKeys/(default)CheckedKeys/(default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes | String | treeNode's position |
| isLeaf | whether it's leaf node | bool | false |
Development
npm install
npm startTest Case
http://localhost:8018/tests/runner.html?coverage
Coverage
License
rc-tree is released under the MIT license.
