bee-tree/demo/demolist/Demo4.js

110 lines
2.6 KiB
JavaScript
Raw Normal View History

2016-12-30 15:43:08 +08:00
/**
*
* @title Tree可搜索事例
* @description
*
*/
const dataList = [];
const generateList = (data) => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
dataList.push({ key, title: key });
if (node.children) {
generateList(node.children, node.key);
}
}
};
generateList(gData);
const getParentKey = (key, tree) => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some(item => item.key === key)) {
parentKey = node.key;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey;
};
class Demo4 extends Component {
constructor(props) {
super(props);
this.state = {
expandedKeys: [],
searchValue: '',
autoExpandParent: true,
}
}
onExpand = (expandedKeys) => {
this.setState({
expandedKeys,
autoExpandParent: false,
});
}
onChange = (e) => {
const value = e.target.value;
const expandedKeys = [];
dataList.forEach((item) => {
if (item.key.indexOf(value) > -1) {
expandedKeys.push(getParentKey(item.key, gData));
}
});
const uniqueExpandedKeys = [];
expandedKeys.forEach((item) => {
if (item && uniqueExpandedKeys.indexOf(item) === -1) {
uniqueExpandedKeys.push(item);
}
});
this.setState({
expandedKeys: uniqueExpandedKeys,
searchValue: value,
autoExpandParent: true,
});
}
render() {
const { searchValue, expandedKeys, autoExpandParent } = this.state;
const loop = data => data.map((item) => {
const index = item.key.search(searchValue);
const beforeStr = item.key.substr(0, index);
const afterStr = item.key.substr(index + searchValue.length);
const title = index > -1 ? (
<span>
{beforeStr}
<span className="ant-tree-searchable-filter">{searchValue}</span>
{afterStr}
</span>
) : <span>{item.key}</span>;
if (item.children) {
return (
<TreeNode key={item.key} title={title}>
{loop(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.key} title={title} />;
});
return (
<div>
<FormControl
style={{ width: 200 }}
placeholder="Search"
onChange={this.onChange}
/>
<Tree
onExpand={this.onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
>
{loop(gData)}
</Tree>
</div>
);
}
}