ant-design/components/tree/demo/dynamic.md

112 lines
2.6 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 3
2016-07-21 09:52:39 +08:00
title:
zh-CN: 异步数据加载
en-US: load data asynchronously
2016-03-31 09:40:55 +08:00
---
2015-10-27 15:47:01 +08:00
2016-07-21 09:52:39 +08:00
## zh-CN
2016-01-28 15:13:17 +08:00
点击展开节点,动态加载数据。
2015-10-27 15:47:01 +08:00
2016-07-21 09:52:39 +08:00
## en-US
To load data asynchronously when click to expand a treeNode.
2017-01-19 15:19:03 +08:00
````__react
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
2015-10-27 15:47:01 +08:00
2016-01-07 19:05:55 +08:00
function generateTreeNodes(treeNode) {
const arr = [];
const key = treeNode.props.eventKey;
for (let i = 0; i < 3; i++) {
arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });
2016-01-07 19:05:55 +08:00
}
return arr;
}
2015-10-27 15:47:01 +08:00
2016-01-07 19:05:55 +08:00
function setLeaf(treeData, curKey, level) {
const loopLeaf = (data, lev) => {
const l = lev - 1;
data.forEach((item) => {
if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :
curKey.indexOf(item.key) !== 0) {
return;
}
if (item.children) {
loopLeaf(item.children, l);
} else if (l < 1) {
item.isLeaf = true;
}
});
};
loopLeaf(treeData, level + 1);
}
2015-10-27 15:47:01 +08:00
2016-01-07 19:05:55 +08:00
function getNewTreeData(treeData, curKey, child, level) {
const loop = (data) => {
if (level < 1 || curKey.length - 3 > level * 2) return;
data.forEach((item) => {
if (curKey.indexOf(item.key) === 0) {
if (item.children) {
loop(item.children);
} else {
item.children = child;
}
}
});
2016-01-07 19:05:55 +08:00
};
loop(treeData);
setLeaf(treeData, curKey, level);
}
const Demo = React.createClass({
2015-10-27 15:47:01 +08:00
getInitialState() {
return {
2016-01-07 19:05:55 +08:00
treeData: [],
2015-10-27 15:47:01 +08:00
};
},
componentDidMount() {
2016-01-07 19:05:55 +08:00
setTimeout(() => {
2015-10-27 15:47:01 +08:00
this.setState({
2016-01-07 19:05:55 +08:00
treeData: [
{ name: 'pNode 01', key: '0-0' },
{ name: 'pNode 02', key: '0-1' },
{ name: 'pNode 03', key: '0-2', isLeaf: true },
2016-01-07 19:05:55 +08:00
],
2015-10-27 15:47:01 +08:00
});
2016-01-07 19:05:55 +08:00
}, 100);
2015-10-27 15:47:01 +08:00
},
2016-01-07 19:05:55 +08:00
onSelect(info) {
2015-10-27 15:47:01 +08:00
console.log('selected', info);
},
2016-01-07 19:05:55 +08:00
onLoadData(treeNode) {
return new Promise((resolve) => {
setTimeout(() => {
const treeData = [...this.state.treeData];
getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
this.setState({ treeData });
2016-01-07 19:05:55 +08:00
resolve();
2016-07-13 16:12:44 +08:00
}, 1000);
2015-10-27 15:47:01 +08:00
});
},
render() {
2016-01-28 15:13:17 +08:00
const loop = data => data.map((item) => {
if (item.children) {
return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
}
return <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'} />;
});
2016-01-07 19:05:55 +08:00
const treeNodes = loop(this.state.treeData);
2015-10-27 15:47:01 +08:00
return (
2016-01-28 15:13:17 +08:00
<Tree onSelect={this.onSelect} loadData={this.onLoadData}>
{treeNodes}
</Tree>
);
2016-01-07 19:05:55 +08:00
},
});
2015-10-27 15:47:01 +08:00
2016-01-07 19:05:55 +08:00
ReactDOM.render(<Demo />, mountNode);
2015-10-27 15:47:01 +08:00
````