antd实现动态树形搜索
作者：互联网
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Button, Menu, Spin, Icon, Input, Tree } from 'antd';
import store from './store';
import styles from './index.module.css';
import envStore from 'pages/config/environment/store';
import lds from 'lodash';
const TreeNode = Tree.TreeNode; /* const x = 5;//递归n个子类 const y = 5;//递归处理每层前n个目录 const z = 0;//n层目录 const gData = []; const treeData = [ { key: "aaaa", title: "aaaaa", children: [ { key: '1', title: "mall-all" } ] }, { key: "本地测试", title: "本地测试", children: [ { key: '6', title: "test4" }, { key: '5', title: "test3" }, { key: '4', title: "test2" }, { key: '3', title: "test1" } ] } ] const treeData = [];
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 }); 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);
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); } } }; generateList(treeData); */
@observer class SelectApp extends React.Component { constructor(props) { super(props); this.state = { env_id: 0, search: '', expandedKeys: [], searchValue: '', autoExpandParent: true, treeData: [], dataList: [], } } componentDidMount() { store.loadDeploys() if (envStore.records.length === 0) { envStore.fetchRecords().then(this._initEnv) } else { this._initEnv() } }
componentWillUnmount() { store.refs = {} }
_initEnv = () => { if (envStore.records.length) { this.setState({ env_id: envStore.records[0].id }) } };
handleClick = (deploy) => { store.record = { deploy_id: deploy.id, app_host_ids: deploy.host_ids }; if (['1', '3'].includes(deploy.extend)) { store.ext1Visible = true } else { store.ext2Visible = true } store.addVisible = false };
handleRef = (el, id) => { if (el && !store.refs.hasOwnProperty(id)) { setTimeout(() => store.refs[id] = el.scrollWidth > el.clientWidth, 200) } };
generateList = () => { const data = store.deploys //console.log(data) //this.setState({treeData:data}) for (let i = 0; i < data.length; i++) { const node = data[i]; const key = node.key; this.state.dataList.push({ key, title: key }); if (node.children) { this.generateList(node.children); } } };
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 (this.getParentKey(key, node.children)) { parentKey = this.getParentKey(key, node.children); } } } return parentKey; };
onExpand = (expandedKeys) => { this.setState({ expandedKeys, autoExpandParent: false, }); } onChange = (e) => { const value = e.target.value; const treeData = store.deploys; const dataList = store.deploys; const expandedKeys = dataList.map((item) => { if (item.key.indexOf(value) > -1) { return this.getParentKey(item.key, treeData); } return null; }).filter((item, i, self) => item && self.indexOf(item) === i); this.setState({ expandedKeys, searchValue: value, autoExpandParent: true, }); };
renderTreeNode = data => data.map((item) => { const { searchValue } = this.state; const index = item.key.indexOf(searchValue); const beforeStr = item.key.substr(0, index); const afterStr = item.key.substr(index + searchValue.length); const title = index > -1 ? ( <span> {beforeStr} <span style={{ color: '#f50' }}>{searchValue}</span> {afterStr} </span> ) : <span>{item.key}</span>; if (item.children) { return ( <TreeNode key={item.key} title={title}> {this.renderTreeNode(item.children)} </TreeNode> ); } return <TreeNode key={item.key} title={title} />; });
render() { //console.log(JSON.stringify(store.deploys)) const { env_id } = this.state; //this.state.treeData= treeData; //this.setState({gData:treeData}) //console.log(store.deploys)
const treeData = store.deploys;
/*if (this.state.search) { records = records.filter(x => x['app_name'].toLowerCase().includes(this.state.search.toLowerCase())) }*/ const { expandedKeys, autoExpandParent } = this.state; return ( <Modal visible width={800} maskClosable={false} title="选择应用" bodyStyle={{ padding: 0 }} onCancel={() => store.addVisible = false} footer={null}> <div className={styles.container}> <div className={styles.left}> <Spin spinning={envStore.isFetching}> <Menu mode="inline" selectedKeys={[String(env_id)]} style={{ border: 'none' }} onSelect={({ selectedKeys }) => this.setState({ env_id: selectedKeys[0] })}> {envStore.records.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)} </Menu> </Spin> </div>
<div className={styles.right}> <Spin spinning={store.isLoading}> <Input.Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} /> <Tree onExpand={this.onExpand} expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} > {this.renderTreeNode(treeData)} </Tree>
</Spin> </div> </div > </Modal > ) } }
export default SelectApp
const TreeNode = Tree.TreeNode; /* const x = 5;//递归n个子类 const y = 5;//递归处理每层前n个目录 const z = 0;//n层目录 const gData = []; const treeData = [ { key: "aaaa", title: "aaaaa", children: [ { key: '1', title: "mall-all" } ] }, { key: "本地测试", title: "本地测试", children: [ { key: '6', title: "test4" }, { key: '5', title: "test3" }, { key: '4', title: "test2" }, { key: '3', title: "test1" } ] } ] const treeData = [];
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 }); 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);
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); } } }; generateList(treeData); */
@observer class SelectApp extends React.Component { constructor(props) { super(props); this.state = { env_id: 0, search: '', expandedKeys: [], searchValue: '', autoExpandParent: true, treeData: [], dataList: [], } } componentDidMount() { store.loadDeploys() if (envStore.records.length === 0) { envStore.fetchRecords().then(this._initEnv) } else { this._initEnv() } }
componentWillUnmount() { store.refs = {} }
_initEnv = () => { if (envStore.records.length) { this.setState({ env_id: envStore.records[0].id }) } };
handleClick = (deploy) => { store.record = { deploy_id: deploy.id, app_host_ids: deploy.host_ids }; if (['1', '3'].includes(deploy.extend)) { store.ext1Visible = true } else { store.ext2Visible = true } store.addVisible = false };
handleRef = (el, id) => { if (el && !store.refs.hasOwnProperty(id)) { setTimeout(() => store.refs[id] = el.scrollWidth > el.clientWidth, 200) } };
generateList = () => { const data = store.deploys //console.log(data) //this.setState({treeData:data}) for (let i = 0; i < data.length; i++) { const node = data[i]; const key = node.key; this.state.dataList.push({ key, title: key }); if (node.children) { this.generateList(node.children); } } };
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 (this.getParentKey(key, node.children)) { parentKey = this.getParentKey(key, node.children); } } } return parentKey; };
onExpand = (expandedKeys) => { this.setState({ expandedKeys, autoExpandParent: false, }); } onChange = (e) => { const value = e.target.value; const treeData = store.deploys; const dataList = store.deploys; const expandedKeys = dataList.map((item) => { if (item.key.indexOf(value) > -1) { return this.getParentKey(item.key, treeData); } return null; }).filter((item, i, self) => item && self.indexOf(item) === i); this.setState({ expandedKeys, searchValue: value, autoExpandParent: true, }); };
renderTreeNode = data => data.map((item) => { const { searchValue } = this.state; const index = item.key.indexOf(searchValue); const beforeStr = item.key.substr(0, index); const afterStr = item.key.substr(index + searchValue.length); const title = index > -1 ? ( <span> {beforeStr} <span style={{ color: '#f50' }}>{searchValue}</span> {afterStr} </span> ) : <span>{item.key}</span>; if (item.children) { return ( <TreeNode key={item.key} title={title}> {this.renderTreeNode(item.children)} </TreeNode> ); } return <TreeNode key={item.key} title={title} />; });
render() { //console.log(JSON.stringify(store.deploys)) const { env_id } = this.state; //this.state.treeData= treeData; //this.setState({gData:treeData}) //console.log(store.deploys)
const treeData = store.deploys;
/*if (this.state.search) { records = records.filter(x => x['app_name'].toLowerCase().includes(this.state.search.toLowerCase())) }*/ const { expandedKeys, autoExpandParent } = this.state; return ( <Modal visible width={800} maskClosable={false} title="选择应用" bodyStyle={{ padding: 0 }} onCancel={() => store.addVisible = false} footer={null}> <div className={styles.container}> <div className={styles.left}> <Spin spinning={envStore.isFetching}> <Menu mode="inline" selectedKeys={[String(env_id)]} style={{ border: 'none' }} onSelect={({ selectedKeys }) => this.setState({ env_id: selectedKeys[0] })}> {envStore.records.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)} </Menu> </Spin> </div>
<div className={styles.right}> <Spin spinning={store.isLoading}> <Input.Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} /> <Tree onExpand={this.onExpand} expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} > {this.renderTreeNode(treeData)} </Tree>
</Spin> </div> </div > </Modal > ) } }
export default SelectApp
标签：const,treeData,item,树形,搜索,key,antd,id,store 来源： https://www.cnblogs.com/tiannan/p/13679602.html