This article takes you through the addition, deletion, modification and query of JS processing tree structure data

​

  Catalog

Problem description ：JS Handle the addition, deletion, modification and query of tree structure

Solution ：

1、 New node

2、 Delete node

3、 Modify node

4、 Find node

---

Problem description ：JS Handle the addition, deletion, modification and query of tree structure

         Recently, I am developing a permission management module of the background management system , Data processing logic involving various tree structures , for example ： increase , Delete , Change , Check etc ; Compared with ordinary array structure data , The processing of tree structure is not as intuitive as array , But it's not that complicated , It takes a little more —— Recursive search To perform deep traversal of data , What about here , Bloggers also share with you the methods summarized in the development process , One article will take you through JS Tree structure data processing ：

​ edit

Examples of data structures

  let data = [{        id: 1,        label: ' Class A  1',        children: [{          id: 4,          label: ' second level  1-1',          children: [{            id: 9,            label: ' Level three  1-1-1'          }, {            id: 10,            label: ' Level three  1-1-2'          }]        }]      }, {        id: 2,        label: ' Class A  2',        children: [{          id: 5,          label: ' second level  2-1'        }, {          id: 6,          label: ' second level  2-2'        }]      }, {        id: 3,        label: ' Class A  3',        children: [{          id: 7,          label: ' second level  3-1'        }, {          id: 8,          label: ' second level  3-2'        }]      }];

Solution ：

1、 New node

Find the specified node of the tree structure , Add child node , The code is as follows ：

const appendNodeInTree = (id, tree, obj) => {  tree.forEach(ele=> {    if (ele.id === id) {      ele.children ? ele.children.push(obj) : ele.children = [obj]    } else {      if (ele.children) {        appendNodeInTree(id, ele.children, obj)      }    }  })  return tree}

2、 Delete node

Find the specified node of the tree structure , Delete node , The code is as follows

const removeNodeInTree=(treeList, id)=> { //  adopt id From an array （ Tree structure ） Remove elements from   if (!treeList || !treeList.length) {    return  }  for (let i = 0; i < treeList.length; i++) {    if (treeList[i].id === id) {      treeList.splice(i, 1);      break;    }    removeNodeInTree(treeList[i].children, id)  }}

3、 Modify node

Recursively find and modify the state of a node , The code is as follows ：

  const updateNodeInTree=(treeList,id, obj)=> {      if (!treeList || !treeList.length) {        return;      }      for (let i = 0; i < treeList.length; i++) {        if (treeList[i].id == id) {          treeList[i]= obj;          break;        }        setTreeListNodeFalse(treeList[i].children,id,obj);      }    }

4、 Find node

Recursively find a node of the tree node , Code ：

const findNodeInTree = (data, key, callback) => {      for (let i = 0; i < data.length; i++) {        if (data[i].key == key) {          return callback(data[i], i, data)        }        if (data[i].children) {          findNodeInTree (data[i].children, key, callback)        }      }    }    //  The method to store the found node     let Obj={}    findNodeInTree(data, key, (item, index, arr) => {      Obj = item    })    //  At this point Obj The corresponding node to be found     console.log(Obj)

---

summary

        This paper introduces js How to deal with the addition, deletion, modification and query of tree mounted data structure , Master the above functions , It can basically deal with data processing of the same business type , more js Difficulties in dealing with data problems , It is recommended to check the previous articles summarized by bloggers , Friends who like bloggers can pay attention to bloggers , Focus , Neverlost , Bloggers take you on the highway ~~

​ edit

​