zoukankan      html  css  js  c++  java
  • react实现递归搜索下拉查询目录树功能

    功能介绍:

    1. 实现递归搜索递归类型的对象数据,

    2. 列表能递归展示数据

    3. 切换目录时符合目录树结构的数据展示

    功能展示:

    index.js

    import React, {Component} from 'react';
    import data from './data';

    class Documentation extends Component {
      flag =  false;
      state = {
        value: '',
        searchLists: []
      };

      /**
       * 递归函数找到包含的项目
       * data 要递归的数组
       * value 寻找的内容
       * dataArr 返回由数组包含的项
       */
      valueRecursion = (data, value,dataArr) => {
        data.forEach(res => {
          let content = '';
          content = res.label;
          res.actions.items.forEach(item => {
            content += item.content;
          });
          if (content.includes(value)) {
            dataArr.push(res);
          }else if(res.items && res.items.length > 0) {
            this.valueRecursion(res.items, value, dataArr)
          }
        });
        return dataArr;
      }

      /**
       * 拿到输入框的值,然后去递归,找到包含搜索内容项
       */
      searchValue= (e) => {
        let lists = this.valueRecursion(data.items, e.target.value,[]);
        this.setState({
          value: e.target.value,
          searchLists: lists
        });
      }

      /**
       * 设置子dom显示,并且刷新数据
       */
      openChild = (res,numIndex)=> {
        console.log(this.refs[res.id].childNodes);
        let activeEle = this.refs[res.id];
        let activeEleARR = activeEle.childNodes;
        activeEleARR.forEach(res => {
          if(res.nodeName === 'DIV') {
            if(res.style.display === 'none') {
              res.style.display = 'block';
            } else {
              res.style.display = 'none';
            }
          }
        })
        if(numIndex === 1) {
          let allBrother = activeEle.parentNode.childNodes;
          allBrother.forEach(res => {
            if(res.nodeName === 'DIV' && res !== activeEle) {
              res.childNodes.forEach(res => {
                if (res.nodeName === 'DIV') {
                  res.style.display = 'none';
                }
              })
            }
          })
        }
        // 下面处理每个节点数据展示
      }

      /**
       * render包含项中所有的列表
       */
      searchList = (data,numIndex)=> {
        numIndex = numIndex +1;
        const list = [...data];
        let lists = [];
        lists = list.map((res) => {
          return (
            <div key={res.id} ref={res.id}
            style={{marginLeft: `${(numIndex-1)*20}px`,display: numIndex === 1? 'block':'none'}}>
              <span onClick={this.openChild.bind(this,res,numIndex)}>{res.label}</span>
              {(res.items && res.items.length > 0)?this.searchList(res.items,numIndex):''}
            </div>
          )
        })
        return lists;
      }

      render() {
        return (
          <div>
            <input type="text" value={this.state.value} onChange={this.searchValue} />
            {this.state.searchLists.length > 0? this.searchList(this.state.searchLists,0):''}
          </div>
        );
      }
    }


    export default Documentation;

    data.js

    const data = {
        id: '00',
        label: '00000000',
        items: [
            {
                id: '0',
                label: '0',
                actions: {
                    items: [
                        {
                            content: '0'
                        },
                        {
                            content: '0'
                        }
                    ]
                },
                items: [
                    {
                        id: '00',
                        label: '00',
                        actions: {
                            items: [
                                {
                                    content: '00'
                                }
                            ]
                        },
                        items: [
                            {
                                id: '000',
                                label: '000',
                                actions: {
                                    items: [
                                        {
                                            content: '000'
                                        }
                                    ]
                                },
                                items: [
                                    {
                                        id: '0000',
                                        label: '0000',
                                        actions: {
                                            items: [
                                                {
                                                    content: '0000'
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        id: '0001',
                                        label: '0001',
                                        actions: {
                                            items: [
                                                {
                                                    content: '0001'
                                                }
                                            ]
                                        }
                                    }
                                ]
                            },
                            {
                                id: '001',
                                label: '001',
                                actions: {
                                    items: [
                                        {
                                            content: '001'
                                        }
                                    ]
                                }
                            },
                            {
                                id: '002',
                                label: '002',
                                actions: {
                                    items: [
                                        {
                                            content: '002'
                                        }
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        id: '01',
                        label: '01',
                        actions: {
                            items: [
                                {
                                    content: '01'
                                }
                            ]
                        },
                        items: [
                            {
                                id: '001',
                                label: '001',
                                actions: {
                                    items: [
                                        {
                                            content: '001'
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                ]
            },
            {
                id: '1',
                label: '1',
                actions: {
                    items: [
                        {
                            content: '1'
                        },
                        {
                            content: '1'
                        }
                    ]
                },
                items: [
                    {
                        id: '10',
                        label: '10',
                        actions: {
                            items: [
                                {
                                    content: '10'
                                },
                                {
                                    content: '10'
                                }
                            ]
                        }
                    },
                    {
                        id: '11',
                        label: '11',
                        actions: {
                            items: [
                                {
                                    content: '11'
                                },
                                {
                                    content: '11'
                                }
                            ]
                        },
                        items: [
                            {
                                id: '110',
                                label: '110',
                                actions: {
                                    items: [
                                        {
                                            content: '110'
                                        },
                                        {
                                        content: '110'
                                        }
                                    ]
                                }
                            },
                            {
                                id: '111',
                                label: '111',
                                actions: {
                                    items: [
                                        {
                                            content: '111'
                                        },
                                        {
                                            content: '111'
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                ]
            },
            {
                id: '2',
                label: '2',
                actions: {
                    items: [
                        {
                            content: '2'
                        },
                        {
                            content: '2'
                        }
                    ]
                },
                items: []
            }
        ]
    };

    export default data;
  • 相关阅读:
    Spring Boot启动过程(四):Spring Boot内嵌Tomcat启动
    dubbox注解的一个坑
    内嵌Tomcat的Connector对象的静态代码块
    Spring Boot启动过程(三)
    Spring Boot启动过程(二)
    Spring Boot启动过程(一)
    SpringMVC基础学习(二)—开发Handler
    JS弹出框
    Oracle的基本学习(三)—函数
    Oracle的基本学习(二)—基本查询
  • 原文地址:https://www.cnblogs.com/windcat/p/12588930.html
Copyright © 2011-2022 走看看