React Tree

用于 react 的树形ui 组件。「tree ui component for react」

  • 所有者: react-component/tree
  • 平台: Windows,Linux,Mac
  • 許可證: MIT License
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

rc-tree


tree ui component for react

NPM version build status Test coverage gemnasium deps npm download

Screenshots

Feature

  • Support all popular browsers, including Internet Explorer 9 and above.

Example

http://localhost:8018/examples/

online example: http://react-component.github.io/tree/examples/

install

rc-tree

Usage

see examples

API

Tree props, name, description, type, default, ---, ---, ---, ---, autoExpandParent, whether auto expand parent treeNodes, bool, false, checkable, whether support checked, bool/React Node, false, checkedKeys, Controlled checked treeNodes(After setting, defaultCheckedKeys will not work). Note: parent and children nodes are associated, if the parent node's key exists, it all children node will be checked, and vice versa. When set checkable and checkStrictly, it should be an object, which contains checked array and halfChecked array., String[]/{checked:Array,halfChecked:Array}, [], checkStrictly, check node precisely, parent and children nodes are not associated, bool, false, className, additional css class of root dom node, String, '', defaultCheckedKeys, default checked treeNodes, String[], [], defaultExpandedKeys, expand specific treeNodes, String[], -, defaultExpandAll, expand all treeNodes, bool, false, defaultExpandParent, auto expand parent treeNodes when init, bool, true, defaultSelectedKeys, default selected treeNodes, String[], [], disabled, whether disabled the tree, bool, false, 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, expandedKeys, Controlled expand specific treeNodes, String[], -, filterTreeNode, filter some treeNodes as you need. it should return true, function(node), -, icon, customize icon. When you pass component, whose render will receive full TreeNode props as component props, element/Function(props), -, loadedKeys, Mark node is loaded when loadData is true, string[], -, loadData, load data asynchronously and the return value should be a promise, function(node), -, multiple, whether multiple select, bool, false, prefixCls, prefix class, String, 'rc-tree', selectable, whether can be selected, bool, true, selectedKeys, Controlled selected treeNodes(After setting, defaultSelectedKeys will not work), String[], [], showIcon, whether show icon, bool, true, showLine, whether show line, bool, false, treeData, treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array), array<{key,title,children, [disabled, selectable]}>, -, onCheck, click the treeNode/checkbox to fire, function(checkedKeys, e:{checked: bool, checkedNodes, node, event, nativeEvent}), -, onExpand, fire on treeNode expand or not, function(expandedKeys, {expanded: bool, node, nativeEvent}), -, onDragEnd, it execs when fire the tree's dragend event, function({event,node}), -, onDragEnter, it execs when fire the tree's dragenter event, function({event,node,expandedKeys}), -, onDragLeave, it execs when fire the tree's dragleave event, function({event,node}), -, onDragOver, it execs when fire the tree's dragover event, function({event,node}), -, onDragStart, it execs when fire the tree's dragstart event, function({event,node}), -, onDrop, it execs when fire the tree's drop event, function({event, node, dragNode, dragNodesKeys}), -, onLoad, Trigger when a node is loaded. If you set the loadedKeys, you must handle onLoad to avoid infinity loop, function(loadedKeys, {event, node}), -, onMouseEnter, call when mouse enter a treeNode, function({event,node}), -, onMouseLeave, call when mouse leave a treeNode, function({event,node}), -, onRightClick, select current treeNode and show customized contextmenu, function({event,node}), -, onSelect, click the treeNode to fire, function(selectedKeys, e:{selected: bool, selectedNodes, node, event, nativeEvent}), -, switcherIcon, specific the switcher icon., ReactNode / (props: TreeNodeAttribute) => ReactNode, -, ### TreeNode props

note: if you have a lot of TreeNode, like more than 1000,
make the parent node is collapsed by default, will obvious effect, very fast.
Because the children hide TreeNode will not insert into dom., name, description, type, default, ---, ---, ---, ---, className, additional class to treeNode, String, '', checkable, control node checkable if Tree is checkable, bool, -, style, set style to treeNode, Object, '', disabled, whether disabled the treeNode, bool, false, disableCheckbox, whether disable the treeNode' checkbox, bool, false, title, tree/subTree's title, String/element/((data: DataNode) => React.ReactNode), '---', 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, icon, customize icon. When you pass component, whose render will receive full TreeNode props as component props, element/Function(props), -, switcherIcon, specific the switcher icon., ReactNode / (props: TreeNodeAttribute) => ReactNode, -, ## note

The number of treeNodes can be very large, but when enable checkable, it will spend more computing time, so we cached some calculations(e.g. this.treeNodesStates), to avoid double computing. But, this bring some restrictions, when you async load treeNodes, you should render tree like this {this.state.treeData.length ? <Tree ...>{this.state.treeData.map(t => <TreeNode ... />)}</Tree> : 'loading tree'}

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

主要指標

概覽
名稱與所有者react-component/tree
主編程語言TypeScript
編程語言JavaScript (語言數: 3)
平台
許可證MIT License
所有者活动
創建於2015-04-07 08:58:50
推送於2025-07-01 21:43:01
最后一次提交2025-03-19 11:57:29
發布數319
最新版本名稱@rc-component/tree@1.0.1 (發布於 )
第一版名稱0.9.5 (發布於 )
用户参与
星數1.2k
關注者數39
派生數492
提交數879
已啟用問題?
問題數331
打開的問題數140
拉請求數227
打開的拉請求數32
關閉的拉請求數367
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?