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 | |selectable | whether can be selected | 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(node, expanded, expandedKeys) | - | |onCheck | click the treeNode/checkbox to fire | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - | |onSelect | click the treeNode to fire | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |filterTreeNode | filter some treeNodes as you need. it should return true | function(node) | - | |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 | |onDragStart | it execs when fire the tree's dragstart event | function({event,node}) | - | |onDragEnter | it execs when fire the tree's dragenter event | function({event,node,expandedKeys}) | - | |onDragOver | it execs when fire the tree's dragover event | function({event,node}) | - | |onDragLeave | it execs when fire the tree's dragleave event | function({event,node}) | - | |onDrop | 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/node | '---' | |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 start

Test Case

http://localhost:8018/tests/runner.html?coverage

Coverage

http://localhost:8018/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8018/tests/runner.html?coverage

License

rc-tree is released under the MIT license.

other tree view

• ztree
• jqTree
• jquery.treeselect
• angular Select Tree