http://react-component.github.io/tree/examples/big-data.html

big data 在

x 2 y 1

z 只要 大于 6 选中就会出问题

比如 7 的时候就会有几个无法被选中或者现象特别奇怪

Would like to have the possibility on right-click (context-menu) to display possible actions related to the actual node. Callback to a function to get the right context-menu items and identifiers, or as a parameter to the TreeNode construction. Selected action would have to have function callback like onSelect.

Right click would have to select the node, and display the context-menu. Possible? :-)

If you modify the dynamic render example to have 8 levels or greater, and you try to select all children from the root node, the UI does not check all children nodes.

To reproduce the issue:

1. Copy the code from the dynamic example:
   http://react-component.github.io/tree/examples/dynamic.html

2. Create 8 levels of tree nodes:
   Update line 84 from
   getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
   to
   getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 8);

3. Run the code, and expand 8 levels all of the pNode 02 children.

4. Check pNode 02 at the root level.

5. You would expect to see of all pNode 02's children checked, however, the root node remained unchecked, as do the children on levels 1-7. The leaf on level 8 is checked.

Also, it appears the checked keys is showing the correct value, even though the UI is not reflecting all of the checked key values.

场景: 动态加载节点的子节点, 当前节点没有子节点, 但是依旧 renderSwitcher, 点击加载子节点.

index[1] checked . checkedKeys 里面有index[10-19] 子TreeNode key

Hi, is it possible to trigger the expansion of the nodes in my code, given an eventKey?

http://www.ztree.me/v3/demo.php#_101

目前的默认行为是多选。

一个节点选中的时候 应该是只会影响自己的父节点和子节点 是不是没有必要遍历所有已选中的状态进行handleCheckState？

Is it possible to support multiple columns in tree?

能否在select选中node时执行expand事件打开子节点

I see a edit and delete button on the demo site. It doesn't seen to work though.

现在用户做的有点多，用户应该只实现 action 部分。

http://react-component.github.io/tree/examples/contextmenu.html

<Tree contextMenu={

require('tree/lib/context-menu-plugin')([
{
  name:'item1',
  action(info) {
   // tree node key
    console.log(info.key)
  }
}])
}>

或者实现个 ContextMenuTree

const ContextMenuTree = require('rc-tree/lib/ContextMenuTree');

<ContextMenuTree contextMenu={[{name,action}]}/>

比如我想为一个treeNode 添加一个删除的icon， 现在只能通过title 的方式修改内容
建议

1. title 模式 改为 TreeNode 添加自定义 children
2. title 可以以html 的方式 set

比如双击子节点，打开对应的面板这样的交互场景

http://react-component.github.io/tree/examples/animation.html

rc-collapse has: http://react-component.github.io/collapse/examples/simple.html

when I expanded a node every time,it will trigger this error.

      // after data loaded, need set new expandedKeys
      if (expand && this.props.loadData) {
        return this.props.loadData(treeNode).then(function () {
          if (!controlled) {
            _this2.setState({ expandedKeys: expandedKeys });
          }
        });
      }
onExpand    @   Tree.js?e208:211
onExpand    @   TreeNode.js?82a7:149
ReactErrorUtils.invokeGuardedCallback   @   ReactErrorUtils.js?6b31:71
executeDispatch @   EventPluginUtils.js?0958:79
executeDispatchesInOrder    @   EventPluginUtils.js?0958:102
executeDispatchesAndRelease @   EventPluginHub.js?c6b1:43
executeDispatchesAndReleaseTopLevel @   EventPluginHub.js?c6b1:54
forEachAccumulated  @   forEachAccumulated.js?b898:23
processEventQueue   @   EventPluginHub.js?c6b1:259
runEventQueueInBatch    @   ReactEventEmitterMixin.js?8a20:18
handleTopLevel  @   ReactEventEmitterMixin.js?8a20:34
handleTopLevelWithoutPath   @   ReactEventListener.js?2365:93
handleTopLevelImpl  @   ReactEventListener.js?2365:73
perform @   Transaction.js?6dff:136
batchedUpdates  @   ReactDefaultBatchingStrategy.js?ef70:62
batchedUpdates  @   ReactUpdates.js?ce09:94
dispatchEvent   @   ReactEventListener.js?2365:204

Hi, Will this cause any issue with the component? https://facebook.github.io/react/warnings/special-props.html

It says that - "Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component."

I've upgraded react to 15.3 and the tree component broke, it doesn't load the children nodes. Please kindly advice, thank you.

可以实现设置父子关联关系吗？比如点击父级不选中全部子级。

http://www.ztree.me/v3/demo.php#_201

http://react-component.github.io/tree/examples/big-data-generator.html

hi author ! i see default icon is a folder, so how can i change to another one ?

使用checkedKeys动态checked时，鼠标点击 checked 没什么用啊

Hello, I have a custom title including a dropdown select. I want to get the pos or key of the TreeNode to make the select onChange call. How can I get it? Thanks.

Hi,

I've just noticed that the assets for rc-tree are not included with the component; instead they are links to a website called t.alipayobjects.com:

• https://github.com/react-component/tree/blob/master/assets/index.less#L49 - https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif
• https://github.com/react-component/tree/blob/master/assets/index.less#L77 - https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png
• https://github.com/react-component/tree/blob/master/assets/index.less#L82 - https://t.alipayobjects.com/images/rmsweb/T1YxhiXgJbXXXXXXXX.gif

I can work around this locally by manually downloading the assets and monkey-patching the css.

However, it might be better for users of rc-tree that don't know they need to do this that the assets were included as part of the project. It should just be a case of including them alongside the css.

Do you have any thoughts about doing that?

I know selectedKeys is available via tree.state.selectedKeys. But is there a way to get the node component of selected directly instead of iterate the whole tree to search a key match?

The height value set by selector .rc-tree li .rc-tree-node-content-wrapper is causing style problem. Please remove it.

I need to be able to track which keys are checked on the tree so I can render a new tree with those keys already selected. From what I can tell, the 'checked' property it is looking for only applies if the "checkedStrictly" property it true. When the component loads up and I try to check any node, I get the following error:

"Tree.js:208:253 Uncaught TypeError: Cannot set property 'checked' of undefined"

My component is below:

import React, {PropTypes} from 'react';
import Tree, { TreeNode } from 'rc-tree';

const SearchResultsTree = ({data, loading, onCheckProposal, checkedKeys
  }) => {

/* eslint-disable react/no-multi-comp */
  const loop = (treeData) => {
    return treeData.map((item) => {
      if (item.opportunities) {
        return (
          <TreeNode
            key={'client ' + item.id} title={item.title}
          >
            {loop(item.opportunities)}
          </TreeNode>
        );
      }
      else if (item.proposals) {
        return (
         <TreeNode
            key={'opportunity ' + item.id} title={item.title}
          >
            {loop(item.proposals)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.proposalId} title={item.proposalName} />;
    });
  };
/* eslint-enablereact/no-multi-comp */

  console.log(checkedKeys);
  return (
    <fieldset className="search-results">
      <legend><h5>Search Results</h5></legend>
      <div className="results-tree">
        {loading ?
          <p>
            Loading...
          </p>
          :
          <Tree
            checkable
            autoExpandParent={false}
            selectable={false}
            onCheck={onCheckProposal}
            checkedKeys={checkedKeys}
          >
            {loop(data)}
          </Tree>

        }
      </div>
    </fieldset>
  );
};

SearchResultsTree.propTypes = {
  data: PropTypes.array,
  loading: PropTypes.bool,
  onCheckProposal: PropTypes.func.isRequired,
  checkedKeys: PropTypes.array
};

export default SearchResultsTree;

When props defaultExpandedKeys and defaultExpandAll are both set, react-tree should expand according to defaultExpandedKeys instead of expand all keys

I have a tree with nodes that I can select, but nodes have attributes and user should not be able to select them. Is it possible to set select={false} per TreeNode?

Thanks Alex

I notice that a branch will not collapse if children on that branch have been expanded. Is this intentional? Or am i doing something wrong?

Thank you! :)

Is it possible to obtain a tree like this?

Basically I want to have the checkbox only when isLeaf={true}
I know i can disable it on those treenodes, but I want to hide it also or better to Remove it so it will not appear in the checkedKeys.

Please le me know if I'm wrong opening this issue and if there are other channels for this kind of questions.
Thanks ahead of time!

Hi,
is there any example for using this control?
Also does it support ~100K nodes? ~25K nodes on the same level?

Thanks,
Jonathan

i passed icon attribute with image path as props to treeNode but the image is not displaying in the tree.

can you suggest how to add the custom icon for node in the tree

while i use rc-tree with other modules (such as react-fluxbox-grid ),i should make webpack as this :

{
        test: /(\.scss|\.css)$/,
        loaders: ['style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap']
      }

then ,my rc-tree can not display checkbox and can not choose checkbox......

我把rc-tree组件的源码拿出来，单独放在项目内使用。可是在webpack中报这个错误。
具体是在handleCheckState()函数的代码导致的错误。因为我把这个函数注释掉后，就不再报错了。

WARNING in ./static/component/outline/outline/tree/util.js
Module build failed: TypeError: F:/jinrunsen/Projects/fansmanage/static/component/outline/outline/tree/util.js: Cannot read property 'file' of undefined
    at Plugin.buildExpressionHandler (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-plugin-import\1.0.1\babel-plugin-import\lib\Plugin.js:49:26)
    at Plugin.ExpressionStatement (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-plugin-import\1.0.1\babel-plugin-import\lib\Plugin.js:204:14)
    at applyInstance (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-plugin-import\1.0.1\babel-plugin-import\lib\index.js:27:26)
    at PluginPass.ret.visitor.(anonymous function) (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-plugin-import\1.0.1\babel-plugin-import\lib\index.js:85:9)
    at newFn (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\visitors.js:276:21)
    at NodePath._call (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitMultiple (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\context.js:103:17)
    at TraversalContext.visit (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\context.js:190:19)
    at Function.traverse.node (F:\jinrunsen\Projects\fansmanage\node_modules\.npminstall\babel-traverse\6.18.0\babel-traverse\lib\index.js:114:17)
 @ ./static/component ^\.\/.*$

I have made a tree with several layers of nesting. The onSelect property is on <Tree>, so I have to handle selection for any node in the same method. If I have selected a <TreeNode> that is several levels deep, I'd like to know the parent node at the root level from within the onSelect method. The parameters passed to this method are:

function(selectedKeys, e:{selected: bool, selectedNodes, node, event})

While inspecting the contents of e in the browser debugger, I was not able to find an immediate (or otherwise) way to access the parent node at the root level, or parent nodes in general. How can I do this? Thanks in advance.

http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/reorder.html

Can you guys implement this feature, just like the tree-select filter demo?

When is the onExpand fired? because somehow i don't see the console.log of the expand, i see the start, enter and drop events, but not the onExtand?

the tree is getting expanded, looks like the events just not fired.

功能

• 支持多选，单选
• 支持键盘操作

使用示例

var tree = <Tree defaultCheckedKeys={['1','2-1']}>
<TreeNode title="1"  key='1'/>
<TreeNode title='2' key='2'>
<TreeNode title='2-1' key='2-1' />
</TreeNode>
</Tree>

API

Tree

TreeNode

参考

• kissy tree: https://github.com/modulex/tree
• rc-menu: https://github.com/react-component/menu

在Demo的tree in dropdown里，有搜索功能，但是搜索子节点没有办法展开，但实际上已经定位到了，对此有解决方法或者思路么？

https://github.com/react-component/tree/blob/master/src/TreeNode.jsx#L313

This line makes it invalid HTML to have an anchor as part of your title and causes a console warning if you try. For example if you want a title like

<a href="my/website/navigation">Go to our help pages!</a>

you cannot do that. A simple quick fix is to just change that line to return a

<span>

instead.

可重现 demo: http://codepen.io/superRaytin/pen/rWyEGd?editors=001

初步排查了下，这个问题跟 checkable 模式下 treeNodesState 有关，treeNodesState 在 render 时生成，但如果某些节点是动态生成的，就没有进入 treeNodesState，导致勾选时报错

Tree.js:252 Uncaught TypeError: Cannot set property 'checked' of undefined

node_modules/rc-tree/lib/TreeNode.js:39
[0] var browserUa = (0, _util.browser)(window.navigator.userAgent || '');
[0] ^
[0]
[0] ReferenceError: window is not defined

Online demo: http://codepen.io/yesmeck/pen/oYOmWp?editors=001

When toggling the checkbox of a parent node with 100s of child/grandchild nodes, it can take several seconds (usually 2-3 seconds) before the result is rendered, which is not a good user experience.

Would it be possible for you to improve the performance of this operation?

More info: I am using the "checkedKeys" parameter for <Tree>, and I'm specifying only leaf nodes (ie. nodes with no children) in that parameter (as this makes my application logic much simpler).

性能问题（大量数据下）

• 分页/分步渲染，不再一次插入所有数据

主要的“功能/demo”缺失

• Radio Operation
• 多节点一起拖动（cmd+click选中）
• 节点的增删改；Multiple Trees（左右树拖动）

其他

• 点击title、使节点展开/收起；展开当前节点时、相邻已展开节点收起（作为菜单）
• 支持键盘操作

if children's are in expanded state and collapse parent then again expand the parent, still the children's are in expanded state but it should be in closed state.