ant-design/components/tree/demo/basic-controlled.md

135 lines
3.1 KiB
Markdown
Raw Normal View History

2016-01-07 19:05:55 +08:00
# 受控操作示例
- order: 1
受控操作示例
---
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
const x = 3;
const y = 2;
const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0';
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key });
2016-01-07 19:05:55 +08:00
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const __level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(__level, key, tns[index].children);
});
};
generateData(z);
function loopData(data, callback) {
const loop = (d, level = 0) => {
d.forEach((item, index) => {
const pos = `${level}-${index}`;
if (item.children) {
loop(item.children, pos);
}
callback(item, index, pos);
});
};
loop(data);
}
function getFilterExpandedKeys(data, expandedKeys) {
const expandedPosArr = [];
loopData(data, (item, index, pos) => {
if (expandedKeys.indexOf(item.key) > -1) {
expandedPosArr.push(pos);
}
});
const filterExpandedKeys = [];
loopData(data, (item, index, pos) => {
expandedPosArr.forEach(p => {
if ((pos.split('-').length < p.split('-').length
&& p.indexOf(pos) === 0 || pos === p)
&& filterExpandedKeys.indexOf(item.key) === -1) {
filterExpandedKeys.push(item.key);
}
});
});
return filterExpandedKeys;
}
const Demo = React.createClass({
getDefaultProps() {
return {
2016-01-15 20:10:46 +08:00
multiple: true,
2016-01-07 19:05:55 +08:00
};
},
getInitialState() {
return {
expandedKeys: getFilterExpandedKeys(gData, ['0-0-0', '0-0-1']),
checkedKeys: ['0-0-0'],
selectedKeys: [],
};
},
onExpand(treeNode, expand, expandedKeys) {
console.log('onExpand', expand, expandedKeys);
const index = expandedKeys.indexOf(treeNode.props.eventKey);
if (expand) {
if (index > -1) {
expandedKeys.splice(index, 1);
}
} else {
if (index === -1) {
expandedKeys.push(treeNode.props.eventKey);
}
}
2016-01-28 15:13:17 +08:00
this.setState({ expandedKeys });
2016-01-07 19:05:55 +08:00
},
2016-01-15 20:10:46 +08:00
onCheck(checkedKeys) {
2016-01-07 19:05:55 +08:00
this.setState({
2016-01-15 20:10:46 +08:00
checkedKeys,
2016-01-07 19:05:55 +08:00
selectedKeys: ['0-3', '0-4'],
});
},
2016-01-15 20:10:46 +08:00
onSelect(selectedKeys, info) {
console.log('onSelect', info);
2016-01-28 15:13:17 +08:00
this.setState({ selectedKeys });
2016-01-07 19:05:55 +08:00
},
render() {
2016-01-28 15:13:17 +08:00
const loop = data => data.map((item) => {
if (item.children) {
return (
<TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0'}>
2016-01-15 20:10:46 +08:00
{loop(item.children)}
2016-01-28 15:13:17 +08:00
</TreeNode>
);
}
return <TreeNode key={item.key} title={item.key}/>;
});
return (
2016-01-07 19:05:55 +08:00
<Tree checkable multiple={this.props.multiple} defaultExpandAll
onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}>
2016-01-07 19:05:55 +08:00
{loop(gData)}
</Tree>
2016-01-28 15:13:17 +08:00
);
2016-01-07 19:05:55 +08:00
},
});
ReactDOM.render(<Demo />, mountNode);
````