element树形图地区选择器(二)

话不多说直接开干

后台返回的数据为(为了一次看到更多的内容我用JSON.stringify包裹返回值)

可以看到每个层级的节点id都是从1开始的,但是tree我们要每个节点都得是唯一值才好渲染页面,从上面的图中可以看到我用了一个函数将获取到的值做了一次操作,来看下执行该函数后的结果

可以看到每个子节点的id都变成了唯一值(不接受反驳)

代码为(就是一个简单的递归这里我就不详细说明了)

export default function nodesPid(nodes, pid) {
  for (let i = 0; i < nodes.length; i++) {
    if (pid) {
      nodes[i].pid = pid
      nodes[i].id = pid + '_' + nodes[i].id
    }
    if (nodes[i].states) {
      nodesPid(nodes[i].states, nodes[i].id)
    }
  }
}

好的我们最后得将节点转为树型结构那么我们就得获取当前节点所在树形结构的位置,不然怎么转呢,我是将每个节点所在位置用一个属性表示添加到每个节点,说的也不够明白直接上图

上面是整个算法里面最关键的地方,如果想要看懂整个流程上面必须看懂,不过只想快点搞定可以直接看下面代码了.

上面数据的转换我也用一个函数封装了

import NodeEnd from "./NodeEnd"

export const inspiration = function(awObj){
  var Obj = awObj
  function prentNOdeAward(Obj,prentNode){
    for(let i = 0 ; i < Obj.length ; i++){
      if(!Obj[i].pid){prentNode = [{}]}
      if(i==0){
        NodeEnd(prentNode,Obj[i],0)
      }else{
        NodeEnd(prentNode,Obj[i],1)
      }
      Obj[i].prentNV = JSON.parse(JSON.stringify(prentNode))
      if(Obj[i].states){
        prentNOdeAward(Obj[i].states,JSON.parse(JSON.stringify(prentNode)))
      }
    }
  }
  prentNOdeAward(Obj,[])
  return Obj
}

NodeEnd.js

export default function(nodes,Cnode,type){
  Cnode = JSON.parse(JSON.stringify(Cnode))
  if(Cnode.states){
    delete Cnode.states
  }
  delete Cnode.prentNV
  function toAd(node){
    if(node[0]&&node[0].states){      //找到nodes最里面一层
        toAd(node[0].states)
    }else{      //到最里面了
      if(!nodes[0].id){       //nodes没有id表示是国家刚进入给nodes为[{}]
        node[0].states = []
        Object.assign(node[0],Cnode)
      }else{                //表示已经不是国家刚进入了,至少为第二层
        // if(nodes[0].states.length==0){node[0] = {} }
        if(type==0){      //表示往里面添加一层
          if(nodes[0].states.length==0){ 
            node[0] = {}
            Object.assign(node[0],Cnode)
          }else{
            node[0].states = [{}]
            Object.assign(node[0].states[0],Cnode)
          }
        }else{          //替换最里面一层
          Object.assign(node[0],Cnode)
        }
      }
    }
  }
  toAd(nodes)
}

这样数据就封装完成了.

var newarr = [];
            this.$refs.tree.getCheckedNodes().map((res) => {
                console.log(newarr);
            });

现在我们可以看到选中国家地区后的返回值

这里我用一个算法封装数据

先看结果

我选中如下地区

   

返回封装数据后

下面是算法函数

var newarr = [];
            this.$refs.tree.getCheckedNodes().map((res) => {
                toTree(newarr, JSON.parse(JSON.stringify(res)));
            });

 

 

toTree.js

import treeDiff from './treeDiff'
export default function(newarr,node){
  if(!(node.states&&node.states.length>0&&!node.pid)){        //全选某个存在子级的父级或者
    treeDiff(newarr,node)
  }
}

 

treeDiff.js

export default function(wholeTrees,ChilTree){
  // 引用类型(每次执行函数mangeD地址指向后面一层NVTree)
  var mangeD = ChilTree.prentNV[0]

  var contral = wholeTrees            //指向器      根据递归到生成newarr的第几层就指向第几层

  function childTreeDiff(wholeTree){
    var temp = false,index = 0;
    for (let i = 0 ; i < wholeTree.length ; i++){       //一层一层往已经生成的树形图里面递归
      if(wholeTree[i].id == mangeD.id){         //如果
        temp = true
        index = i
      }
    }
    if(temp){     //表示新tree存在当前子节点prentNV
      // if(Object.prototype.hasOwnProperty.call(mangeD,'states')){
      if(mangeD.states){
        mangeD = mangeD.states[0]
      }else{
        contral = wholeTrees  //回到指向最外层
        contral.push(mangeD)        
        return
      }
      if(!wholeTree[index].states){
        contral = wholeTrees    //回到指向最外层
        wholeTree[index].states = [JSON.parse(JSON.stringify(mangeD))]
      }else{
        contral = wholeTree[index].states       //回到指向最里层
        childTreeDiff(wholeTree[index].states)
      }
    }else{
      contral.push(mangeD)
      contral = wholeTrees          //回到指向最外层
    }
  }
  childTreeDiff(wholeTrees)
}

有细心的小伙伴发现是不是跟mustache模板引擎里面的核心算法有异曲同工之妙

然后编辑

是不是搞定了,哈哈

简便方法我下一章讲