Tree树形控件

    基本

    最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。

    Tree 树形控件 - 图2

    将节点拖拽到其他节点内部或前后。

    1. import { Tree } from 'antd';
    3. const { TreeNode } = Tree;
    5. const x = 3;
    6. const y = 2;
    7. const z = 1;
    8. const gData = [];
    10. const generateData = (_level, _preKey, _tns) => {
    11.   const preKey = _preKey || '0';
    12.   const tns = _tns || gData;
    14.   const children = [];
    15.   for (let i = 0; i < x; i++) {
    16.     const key = `${preKey}-${i}`;
    17.     tns.push({ title: key, key });
    18.     if (i < y) {
    19.       children.push(key);
    20.     }
    21.   }
    22.   if (_level < 0) {
    23.     return tns;
    24.   }
    25.   const level = _level - 1;
    26.   children.forEach((key, index) => {
    27.     tns[index].children = [];
    28.     return generateData(level, key, tns[index].children);
    29.   });
    30. };
    31. generateData(z);
    33. class Demo extends React.Component {
    34.   state = {
    35.     gData,
    36.     expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
    37.   };
    39.   onDragEnter = info => {
    40.     console.log(info);
    41.     // expandedKeys 需要受控时设置
    42.     // this.setState({
    43.     //   expandedKeys: info.expandedKeys,
    44.     // });
    45.   };
    47.   onDrop = info => {
    48.     console.log(info);
    49.     const dropKey = info.node.props.eventKey;
    50.     const dragKey = info.dragNode.props.eventKey;
    51.     const dropPos = info.node.props.pos.split('-');
    52.     const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
    54.     const loop = (data, key, callback) => {
    55.       data.forEach((item, index, arr) => {
    56.         if (item.key === key) {
    57.           return callback(item, index, arr);
    58.         }
    59.         if (item.children) {
    60.           return loop(item.children, key, callback);
    61.         }
    62.       });
    63.     };
    64.     const data = [...this.state.gData];
    66.     // Find dragObject
    67.     let dragObj;
    68.     loop(data, dragKey, (item, index, arr) => {
    69.       arr.splice(index, 1);
    70.       dragObj = item;
    71.     });
    73.     if (!info.dropToGap) {
    74.       // Drop on the content
    75.       loop(data, dropKey, item => {
    76.         item.children = item.children || [];
    77.         // where to insert 示例添加到尾部，可以是随意位置
    78.         item.children.push(dragObj);
    79.       });
    80.     } else if (
    81.       (info.node.props.children || []).length > 0 && // Has children
    82.       info.node.props.expanded && // Is expanded
    83.       dropPosition === 1 // On the bottom gap
    84.     ) {
    85.       loop(data, dropKey, item => {
    86.         item.children = item.children || [];
    87.         // where to insert 示例添加到尾部，可以是随意位置
    88.         item.children.unshift(dragObj);
    89.       });
    90.     } else {
    91.       let ar;
    92.       let i;
    93.       loop(data, dropKey, (item, index, arr) => {
    94.         ar = arr;
    95.         i = index;
    96.       });
    97.       if (dropPosition === -1) {
    98.         ar.splice(i, 0, dragObj);
    99.       } else {
    100.         ar.splice(i + 1, 0, dragObj);
    101.       }
    102.     }
    104.     this.setState({
    105.       gData: data,
    106.     });
    107.   };
    109.   render() {
    110.     const loop = data =>
    111.       data.map(item => {
    112.         if (item.children && item.children.length) {
    113.           return (
    114.             <TreeNode key={item.key} title={item.title}>
    115.               {loop(item.children)}
    116.             </TreeNode>
    117.           );
    118.         }
    119.         return <TreeNode key={item.key} title={item.title} />;
    120.       });
    121.     return (
    122.       <Tree
    123.         className="draggable-tree"
    124.         defaultExpandedKeys={this.state.expandedKeys}
    125.         draggable
    126.         blockNode
    127.         onDragEnter={this.onDragEnter}
    128.         onDrop={this.onDrop}
    129.       >
    130.         {loop(this.state.gData)}
    131.       </Tree>
    132.     );
    133.   }
    134. }
    136. ReactDOM.render(<Demo />, mountNode);

    可搜索

    1. import { Tree, Input } from 'antd';
    3. const { TreeNode } = Tree;
    4. const Search = Input.Search;
    6. const x = 3;
    7. const y = 2;
    8. const z = 1;
    9. const gData = [];
    11. const generateData = (_level, _preKey, _tns) => {
    12.   const preKey = _preKey || '0';
    13.   const tns = _tns || gData;
    14.   const children = [];
    15.   for (let i = 0; i < x; i++) {
    16.     const key = `${preKey}-${i}`;
    17.     tns.push({ title: key, key });
    18.     if (i < y) {
    19.       children.push(key);
    20.     }
    21.   }
    22.   if (_level < 0) {
    23.     return tns;
    25.   const level = _level - 1;
    26.   children.forEach((key, index) => {
    27.     tns[index].children = [];
    28.     return generateData(level, key, tns[index].children);
    29.   });
    30. };
    31. generateData(z);
    33. const dataList = [];
    34. const generateList = data => {
    35.   for (let i = 0; i < data.length; i++) {
    36.     const node = data[i];
    37.     const key = node.key;
    38.     dataList.push({ key, title: key });
    39.     if (node.children) {
    40.       generateList(node.children);
    41.     }
    42.   }
    43. };
    44. generateList(gData);
    46. const getParentKey = (key, tree) => {
    47.   let parentKey;
    48.   for (let i = 0; i < tree.length; i++) {
    49.     const node = tree[i];
    50.     if (node.children) {
    51.       if (node.children.some(item => item.key === key)) {
    52.         parentKey = node.key;
    53.       } else if (getParentKey(key, node.children)) {
    54.         parentKey = getParentKey(key, node.children);
    55.       }
    56.     }
    57.   }
    58.   return parentKey;
    59. };
    61. class SearchTree extends React.Component {
    62.   state = {
    63.     expandedKeys: [],
    64.     searchValue: '',
    65.     autoExpandParent: true,
    66.   };
    68.   onExpand = expandedKeys => {
    69.     this.setState({
    70.       expandedKeys,
    71.       autoExpandParent: false,
    72.     });
    73.   };
    75.   onChange = e => {
    76.     const value = e.target.value;
    77.     const expandedKeys = dataList
    78.       .map(item => {
    79.         if (item.title.indexOf(value) > -1) {
    80.           return getParentKey(item.key, gData);
    81.         }
    82.         return null;
    83.       })
    84.       .filter((item, i, self) => item && self.indexOf(item) === i);
    85.     this.setState({
    86.       expandedKeys,
    87.       searchValue: value,
    88.       autoExpandParent: true,
    89.     });
    90.   };
    92.   render() {
    93.     const { searchValue, expandedKeys, autoExpandParent } = this.state;
    94.     const loop = data =>
    95.       data.map(item => {
    96.         const index = item.title.indexOf(searchValue);
    97.         const beforeStr = item.title.substr(0, index);
    98.         const afterStr = item.title.substr(index + searchValue.length);
    99.         const title =
    100.           index > -1 ? (
    101.             <span>
    102.               {beforeStr}
    103.               <span style={{ color: '#f50' }}>{searchValue}</span>
    104.               {afterStr}
    105.             </span>
    106.           ) : (
    107.             <span>{item.title}</span>
    108.           );
    109.         if (item.children) {
    110.           return (
    111.             <TreeNode key={item.key} title={title}>
    112.               {loop(item.children)}
    113.             </TreeNode>
    114.           );
    115.         }
    116.         return <TreeNode key={item.key} title={title} />;
    117.       });
    118.     return (
    119.       <div>
    120.         <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
    121.         <Tree
    122.           onExpand={this.onExpand}
    123.           expandedKeys={expandedKeys}
    124.           autoExpandParent={autoExpandParent}
    125.         >
    126.           {loop(gData)}
    127.         </Tree>
    128.       </div>
    129.     );
    130.   }
    131. }
    133. ReactDOM.render(<SearchTree />, mountNode);

    Tree 树形控件 - 图4

    可以针对不同的节点定制图标。

    受控操作示例

    受控操作示例

    1. import { Tree } from 'antd';
    3. const { TreeNode } = Tree;
    5. const treeData = [
    6.   {
    7.     title: '0-0',
    8.     key: '0-0',
    9.     children: [
    10.       {
    11.         title: '0-0-0',
    12.         key: '0-0-0',
    13.         children: [
    14.           { title: '0-0-0-0', key: '0-0-0-0' },
    15.           { title: '0-0-0-1', key: '0-0-0-1' },
    16.           { title: '0-0-0-2', key: '0-0-0-2' },
    17.         ],
    18.       },
    19.       {
    20.         title: '0-0-1',
    21.         key: '0-0-1',
    22.         children: [
    23.           { title: '0-0-1-0', key: '0-0-1-0' },
    24.           { title: '0-0-1-1', key: '0-0-1-1' },
    25.           { title: '0-0-1-2', key: '0-0-1-2' },
    26.         ],
    27.       },
    28.       {
    29.         title: '0-0-2',
    30.         key: '0-0-2',
    31.       },
    32.     ],
    33.   },
    34.   {
    35.     title: '0-1',
    36.     key: '0-1',
    37.     children: [
    38.       { title: '0-1-0-0', key: '0-1-0-0' },
    39.       { title: '0-1-0-2', key: '0-1-0-2' },
    40.     ],
    41.   },
    42.   {
    43.     title: '0-2',
    44.     key: '0-2',
    45.   },
    46. ];
    48. class Demo extends React.Component {
    49.   state = {
    50.     expandedKeys: ['0-0-0', '0-0-1'],
    52.     checkedKeys: ['0-0-0'],
    53.     selectedKeys: [],
    54.   };
    56.   onExpand = expandedKeys => {
    57.     console.log('onExpand', expandedKeys);
    58.     // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    59.     // or, you can remove all expanded children keys.
    60.     this.setState({
    61.       expandedKeys,
    62.       autoExpandParent: false,
    63.     });
    64.   };
    66.   onCheck = checkedKeys => {
    67.     console.log('onCheck', checkedKeys);
    68.     this.setState({ checkedKeys });
    69.   };
    71.   onSelect = (selectedKeys, info) => {
    72.     console.log('onSelect', info);
    73.     this.setState({ selectedKeys });
    74.   };
    76.   renderTreeNodes = data =>
    77.     data.map(item => {
    78.       if (item.children) {
    79.         return (
    80.           <TreeNode title={item.title} key={item.key} dataRef={item}>
    81.             {this.renderTreeNodes(item.children)}
    82.           </TreeNode>
    83.         );
    84.       }
    85.       return <TreeNode {...item} />;
    86.     });
    88.   render() {
    89.     return (
    90.       <Tree
    91.         checkable
    92.         onExpand={this.onExpand}
    93.         expandedKeys={this.state.expandedKeys}
    94.         autoExpandParent={this.state.autoExpandParent}
    95.         onCheck={this.onCheck}
    96.         checkedKeys={this.state.checkedKeys}
    97.         onSelect={this.onSelect}
    98.         selectedKeys={this.state.selectedKeys}
    99.       >
    100.         {this.renderTreeNodes(treeData)}
    101.       </Tree>
    102.     );
    103.   }
    104. }
    106. ReactDOM.render(<Demo />, mountNode);

    Tree 树形控件 - 图6

    1. import { Tree } from 'antd';
    3. const { TreeNode } = Tree;
    5. class Demo extends React.Component {
    6.   state = {
    7.     treeData: [
    8.       { title: 'Expand to load', key: '0' },
    9.       { title: 'Expand to load', key: '1' },
    10.       { title: 'Tree Node', key: '2', isLeaf: true },
    11.     ],
    12.   };
    14.   onLoadData = treeNode =>
    15.     new Promise(resolve => {
    16.       if (treeNode.props.children) {
    17.         resolve();
    18.         return;
    19.       }
    20.       setTimeout(() => {
    21.         treeNode.props.dataRef.children = [
    22.           { title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
    23.           { title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
    24.         ];
    25.         this.setState({
    26.           treeData: [...this.state.treeData],
    27.         });
    28.         resolve();
    29.       }, 1000);
    30.     });
    32.   renderTreeNodes = data =>
    33.     data.map(item => {
    34.       if (item.children) {
    35.         return (
    36.           <TreeNode title={item.title} key={item.key} dataRef={item}>
    37.             {this.renderTreeNodes(item.children)}
    38.           </TreeNode>
    39.         );
    40.       }
    41.       return <TreeNode {...item} dataRef={item} />;
    42.     });
    44.   render() {
    45.     return <Tree loadData={this.onLoadData}>{this.renderTreeNodes(this.state.treeData)}</Tree>;
    46.   }
    47. }
    49. ReactDOM.render(<Demo />, mountNode);

    连接线

    带连接线的树。

    Tree 树形控件 - 图8

    内置的目录树，multiple 模式支持 ctrl(Windows) / command(Mac) 复选。

    1. import { Tree } from 'antd';
    3. const DirectoryTree = Tree.DirectoryTree;
    4. const { TreeNode } = Tree;
    6. class Demo extends React.Component {
    7.   onSelect = (keys, event) => {
    8.     console.log('Trigger Select', keys, event);
    9.   };
    11.   onExpand = () => {
    12.     console.log('Trigger Expand');
    13.   };
    15.   render() {
    16.     return (
    17.       <DirectoryTree multiple defaultExpandAll onSelect={this.onSelect} onExpand={this.onExpand}>
    18.         <TreeNode title="parent 0" key="0-0">
    19.           <TreeNode title="leaf 0-0" key="0-0-0" isLeaf />
    20.           <TreeNode title="leaf 0-1" key="0-0-1" isLeaf />
    21.         </TreeNode>
    22.         <TreeNode title="parent 1" key="0-1">
    23.           <TreeNode title="leaf 1-0" key="0-1-0" isLeaf />
    24.           <TreeNode title="leaf 1-1" key="0-1-1" isLeaf />
    25.         </TreeNode>
    26.       </DirectoryTree>
    27.     );
    28.   }
    29. }
    31. ReactDOM.render(<Demo />, mountNode);

    在 3.4.0 之前：树节点可以有很多，但在设置checkable时，将会花费更多的计算时间，因此我们缓存了一些计算结果（this.treeNodesStates）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：

    1. {
    2.   this.state.treeData.length ? (
    3.     <Tree>
    4.       {this.state.treeData.map(data => (
    5.         <TreeNode />
    6.       ))}
    7.     </Tree>
    8.   ) : (
    9.     'loading tree'
    10.   );

    文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式：https://codesandbox.io/s/883vo47xp8