zoukankan      html  css  js  c++  java
  • react antDesign tree树 数据的处理

    //后台返回一维数组 第一步处理成多维数组 第二步处理成所需键值对
      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>
        );
      }
    君不见,高堂明镜悲白发,朝如青丝暮成雪
  • 相关阅读:
    about_并查集
    MST_prim
    MST_kruskal
    物联网的未来:关于物联网的10个预测
    如何展现云计算安全领导力
    虚拟机发展依然强劲,但会被容器取代吗?
    如何从人工智能部署中获取最大价值
    维特根斯坦:为何夸大人工智能是对人性的贬损?
    区块链技术还在不断创新
    区块链真正能用来干什么?这5件事说清楚了
  • 原文地址:https://www.cnblogs.com/lzhflzjx/p/13926217.html
Copyright © 2011-2022 走看看