react antDesign tree树 数据的处理

   2023-03-08 学习力0
核心提示://后台返回一维数组 第一步处理成多维数组 第二步处理成所需键值对render() {const {personInfo: {data,//树形数据 一维数组},loading,dispatch,} = this.props;let partArr = [];partArr = data.list || [];// tree树const { Search } = Input;const x = 3;c
//后台返回一维数组 第一步处理成多维数组 第二步处理成所需键值对
  render() {
    const {
      personInfo: {
        data,//树形数据 一维数组
      },
      loading,
      dispatch,
    } = this.props;
    let partArr = [];
    partArr = data.list || [];
    // tree树
    const { Search } = Input;
    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 });
        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 toTree = function(tarArray) {
      var obj = {};
      tarArray.map((item, index) => {
        obj[item.departId] = item;
      });
      let resDefault = [];
      for (var i = 0; i < tarArray.length; i++) {
        var item = tarArray[i];
        var parent = obj[item.parentId];
        // console.log("parent")
        // console.log(parent)
        if (parent) {
          if (parent.children) {
            let isHere = parent.children.find(_item => _item.departId === item.departId); //是否存在
            // parent.children.push(item);
            if (isHere) {
            } else {
              parent.children.push(item);
            }
          } else {
            parent.children = [];
            parent.children.push(item);
          }
        } else {
          resDefault.push(item);
        }
      }
      return resDefault;
    };
    let partTree = [];
    partTree = toTree(partArr) || [];
    // 因为之前有key,所以先把key替换成别的名字,再把departId替换成key
    let treeList = [];
    treeList = JSON.parse(
      JSON.stringify(partTree)
        .replace(/departName/g, 'title')
        .replace(/key/g, 'id')
        .replace(/departId/g, 'key')
    );
    // if (treeList.length != 0) {

    // } else {

    // }

    // let treeList =  [...new Set(ss.reduce((item, next) => {
    //   return item.concat(next)
    // }, []))].reduce((item,next)=>{
    //   if(next.name){
    //     hashKey[next.name]?'':hashKey[next.name]=true&&item.push(next)
    //   }
    //   else{
    //     item.push(next)
    //   }
    //   return item
    // },[]);

    // const changeTitle = org => {
    //   const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    //   return {
    //     //分别将我们查询出来的值做出改变他的key
    //     title: org.departName,
    //     key: org.departId,
    //     // value: org.id,
    //     // data: { ...org },
    //     //判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作
    //     children: haveChildren ? org.children.map(i => changeTitle(i)) : [],
    //   };
    // };
    // // let treeList = changeTitle(partTree)
    // let treeList = partTree.map(org => changeTitle(org));
    const dataList = [];
    const generateList = data => {
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const { key } = node;
        dataList.push({ key, title: key });
        if (node.children) {
          generateList(node.children);
        }
      }
    };
    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 SearchTree extends React.Component {
      state = {
        expandedKeys: [],
        searchValue: '',
        autoExpandParent: true,
        departId: '',
      };

      onExpand = expandedKeys => {
        this.setState({
          expandedKeys,
          autoExpandParent: true,
        });
      };

      onChange = value => {
        const expandedKeys = treeList
          .map(item => {
            if (item.title.indexOf(value) > -1) {
              return getParentKey(item.key, gData);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        this.setState({
          expandedKeys,
          searchValue: value,
          autoExpandParent: true,
        });
      };
      onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
        // this.setState({
        //   departId: selectedKeys[0],
        //   AuthVisible: false,
        // });
        let name = info.node.props.title;
        getpersonArr(selectedKeys[0], name);
      };

      render() {
        const { searchValue, expandedKeys, autoExpandParent } = this.state;
        const onCheck = (checkedKeys, info) => {
          console.log('onCheck', checkedKeys, info);
        };
        const rootId = 'all';
        return (
          <div>
            {/* onChange={this.onChange} */}
            {/* <Search
              style={{ marginBottom: 8 }}
              placeholder="Search"
              onSearch={this.onChange}
              enterButton="Search"
            /> */}
            {/* <Tree
              // checkable
              // height={233}
              onExpand={this.onExpand}
              // expandedKeys={expandedKeys}
              // autoExpandParent={autoExpandParent}
              onSelect={this.onSelect}
              // onCheck={onCheck}
              treeData={treeList}
            /> */}

            {treeList && treeList.length ? (
              // <Tree
              //   defaultExpandedKeys={[rootId]}
              //   defaultSelectedKeys={[rootId]}
              //   selectedKeys={[this.state.curTreeNode.key]}
              //   treeData={this.state.treeData}
              // />
              <Tree
                // checkable
                // height={233}
                onExpand={this.onExpand}
                // defaultExpandAll={true}
                // defaultExpandedKeys={[rootId]}
                // defaultSelectedKeys={[rootId]}
                // expandedKeys={expandedKeys}
                // autoExpandParent={autoExpandParent}
                onSelect={this.onSelect}
                // onCheck={onCheck}
                treeData={treeList}
              />
            ) : (
              <div className="page-empty">暂无数据</div>
            )}
          </div>
        );
      }
    }

    return (
      <PageHeaderWrapper title="树形数据">
        <Row>
          <Col span={4}>
            <Card style={{ height: '80vh', overflow: 'scroll' }}>
              <div className={styles.tableList}>
                <SearchTree />
              </div>
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • React实现基于Antd密码强度校验组件示例详解
    React实现基于Antd密码强度校验组件示例详解
    目录引言效果预览组件思想组件开发引言最近在开发 Nest 和 Umi 技术栈的个人项目,在用户管理模块需要用到一个密码强度校验组件,在网上寻找一方资料,没有找到自己想要的,特此自己造轮子!效果预览组件思想既然是密码强度校验,那么强度就必须有个梯度,这
    03-16
  • 03 React快速入门(三)——实现从一个输入框中添加完数据后此输入框内容清除的功能
    03 React快速入门(三)——实现从一个输入框中
    功能描述:      我们在一个输入框输入内容,然后点击添加按钮,此输入框的内容就会添加到页面上,但是此输入框中还存在上次输入的内容,我们想在每次输入添加完成之后,此输入框中的内容就会清除,如图:   实现思路:      我们可以先在输入框上定
    03-08
  • react编译器jsxTransformer,babel
    1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展。2.编译器——jsxTransformerJSX代码并不能直接运行,需要将它编译成正常的JavaScript表达式才能运行,jsxTransformer.js就是这一编
    03-08
  • G2( bizCharts ) React 绘制混合图例
    G2( bizCharts ) React 绘制混合图例
     G2( bizCharts ) React 绘制混合图例,// data-set 可以按需引入,除此之外不要引入别的包import React from 'react';import { Chart, Axis, Tooltip, Geom, Legend, Label } from 'bizcharts';import DataSet from '@antv/data-set';// 下面的代码会被作为
    03-08
  • React-多页面应用 react怎么写页面
    React-多页面应用 react怎么写页面
    1初始化项目npm init create-react-app my-app2.修改indeximport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';ReactDOM.render(App /, document.getElementById('root')
    03-08
  • react-native start 启动错误解决方法
    ERRORError watching file for changes: EMFILE{"code":"EMFILE","errno":"EMFILE","syscall":"Error watching file for changes:","filename":null}Error: Error watching file for changes: EMFILE
    03-08
  • React兄弟组件通信(发布者-订阅者模式)
    // eventProxy.js'use strict';const eventProxy = {onObj: {},oneObj: {},on: function(key, fn) {if(this.onObj[key] === undefined) {this.onObj[key] = [];}this.onObj[key].push(fn);},one: function(key, fn) {if(this.oneObj[key] === undefined) {thi
    03-08
  • React笔记_(7)_react路由 react路由配置
    路由路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。路由器当然是作为一个转发设备出现的,主要是转发数据包来实现网络互联。那么react的路由到底指的是什么呢?举个栗子~~~在网页中点击后,从A页面跳到B页面,跳转过程中url发生变
    03-08
  • react-native关闭所有黄色警告 react native st
     将以下这两句话加在index.js(入口文件)中,放在AppRegistry.registerComponent('App', () = App)之前即可1 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty str
    03-08
  • react中style的写法 react styles
    div style={{width: 20px; height=30px}}style的写法/div 
    03-08
点击排行