标签：const treeData item 树形 搜索 key antd id store
/** * 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,treeData,item,树形,搜索,key,antd,id,store 来源： https://www.cnblogs.com/tiannan/p/13679602.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。