diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 5b6b8956c8..c28b1b67f8 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -7,8 +7,8 @@ --- ````jsx -var Tree = antd.Tree; -var TreeNode = Tree.TreeNode; +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; ReactDOM.render( diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md index 2c000534a6..76c82e9438 100644 --- a/components/tree/demo/checkbox.md +++ b/components/tree/demo/checkbox.md @@ -7,8 +7,8 @@ --- ````jsx -var Tree = antd.Tree; -var TreeNode = Tree.TreeNode; +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; function handleCheck(info) { console.log('check: ', info); diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md new file mode 100644 index 0000000000..a85694093e --- /dev/null +++ b/components/tree/demo/dynamic.md @@ -0,0 +1,80 @@ +# 异步数据加载 + +- order: 3 + +异步加载数据 + +--- + +````jsx +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; + +const asyncTree = [ + {name: "pNode 01", key: "0-0"}, +]; + +const generateTreeNodes = () => { + const arr = [ + {name: "伯约", key: "0-0-0"}, + ]; + return arr; +} + +const TreeDemo = React.createClass({ + timeout(duration = 0) { + return new Promise((resolve, reject) => { + setTimeout(resolve.bind(this), duration); + }) + }, + getInitialState() { + return { + treeData: [] + }; + }, + componentDidMount() { + this.timeout(1000).then(() => { + this.setState({ + treeData: asyncTree + }); + return asyncTree; + }); + }, + handleSelect(info) { + console.log('selected', info); + }, + handleDataLoaded(treeNode) { + return this.timeout(1000).then(() => { + const child = generateTreeNodes(); + const treeData = [...this.state.treeData]; + treeData.forEach((item) => { + if (item.key === treeNode.props.eventKey) { + item.children = child; + } + }); + this.setState({treeData}); + return child; + }); + }, + render() { + const loop = (data) => { + return data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } else { + return ; + } + }) + }; + const parseTreeNode = data => loop(data); + let treeNodes = parseTreeNode(this.state.treeData); + return ( + + {treeNodes} + + ) + } +}) + +ReactDOM.render(, document.getElementById('components-tree-demo-dynamic')); +```` diff --git a/components/tree/demo/special.md b/components/tree/demo/special.md index 9262ee17f3..cd9e2d606e 100644 --- a/components/tree/demo/special.md +++ b/components/tree/demo/special.md @@ -7,9 +7,8 @@ --- ````jsx -var Tree = antd.Tree; -var TreeNode = Tree.TreeNode; -var Button = antd.Button; +import { Tree, Button } from 'antd'; +const TreeNode = Tree.TreeNode; class TreeDemo extends React.Component { constructor(props) { diff --git a/components/tree/index.md b/components/tree/index.md index c850733327..28301382ec 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -24,6 +24,7 @@ |defaultSelectedKeys | 默认选中的树节点 | String[] | [] | |onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | |onSelect | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | +|onDataLoaded | 异步加载数据 | function(node)| - | ### TreeNode props diff --git a/package.json b/package.json index de80d37ebf..70bbfdfad6 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "rc-table": "~3.3.0", "rc-tabs": "~5.4.3", "rc-tooltip": "~3.0.1", - "rc-tree": "~0.16.2", + "rc-tree": "~0.18.1", "rc-upload": "~1.6.4", "rc-util": "~2.0.3", "react-slick": "~0.8.0", diff --git a/style/components/tree.less b/style/components/tree.less index 5e986edfe5..830b58c38d 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -57,6 +57,16 @@ cursor: pointer; outline: none; } + &.@{tree-prefix-cls}-icon_loading { + &:after { + content: '\e610'; + display: inline-block; + font-family: 'anticon'; + font-weight: bold; + .animation(loadingCircle 1s infinite linear); + margin-top:8px; + } + } &.@{tree-prefix-cls}-switcher { &-disabled { background: #fff;