JS树形数据递归改造

数据

treeData: [{

                No: 1,

                Name: '',

                NodeList: [

                  {

                    No: 2,

                    Name: '鞋子',

                    NodeList: []

                  },

                  {

                    No: 3,

                    Name: '包包',

                    NodeList: [

                      {

                        No: 4,

                        Name: '大包',

                        NodeList: [

                          {

                            No: 7,

                            Name: '女包',

                            NodeList: [

                              {

                                No: 8,

                                Name: '托特包',

                                NodeList: [

                                  {

                                    No: 11,

                                    Name: '子母包',

                                    NodeList: [

                                      {

                                        No: 2,

                                        Name: '水桶子母包',

                                        NodeList: []

                                      }

                                      

                                    ]

                                  }

                                  

                                ]

                              },

                              {

                                No: 10,

                                Name: '书包',

                                NodeList: []

                              }

                              

                            ]

                          }

                          

                        ]

                      },

                      {

                        No: 5,

                        Name: '中包',

                        NodeList: [

                          

                        ]

                      },

                      {

                        No: 6,

                        Name: '小包',

                        NodeList: [

                          

                        ]

                      }

                      

                    ]

                  }

       

                ]

              }]

第一种改造:键名改造

    getTreeData(list){
      this.treeData = _.map(list, (item) => {
        return this.setCheckedData(item)
      })
    },

   // 将树形结构改造成自己想要的属性名

    setCheckedData(node) {
     let response = _.map(node, item => (
        {
          id: item.No,
          label: item.Name,
          children:item.Nodelist
        }
      ))
    _.each(response, m => {
      if(m.children && m.children.length > 0){
        m.children = getNewTreeDataName (m.children)
      }
    })
    return response
    },

第二种 将树形数据拉平成数组对象

    getTreeData(list){
      let arr = []
       _.each(list, (item, i) => {
       arr[i] = []

        return this.setCheckedData(item, arr[i])
      })
    },

   // 将树形结构改造成自己想要的属性名

    setCheckedData(node, arr) {
      //当前node没有children,意味着node没有子级,则将当前node的数据保存到数组中
        arr.push({
              id: node.id,
              label: node.Name
        });
       if(node.categoryNodeList && node.categoryNodeList.length>0) {
          node.categoryNodeList.forEach((subnode) => this.getCheckedData(subnode, arr));
         }
    },

第三种给叶子添加属性

   //递归获取最后一级叶子
    getTreeData(list){
      this.treeData = _.map(list, (item) => {
        let key = item.No
        
        return this.setTreeData(item, key)
      })
    },
    setTreeData(node, key) {
      if(!node.NodeList|| node.NodeList.length === 0){
        node.parent = key
      }
      if(node.NodeList && node.NodeList.length>0) {
        node.NodeList.forEach((subnode) => this.setTreeData(subnode, key));
      }
      return node
    },

获取树形数据递归算法可以使用深度优先遍历(DFS)或广度优先遍历(BFS)。以下是使用 DFS 的实现示例: ```javascript function getTreeList(treeData, parentId = null) { const result = []; for (let i = 0; i < treeData.length; i++) { const node = treeData[i]; if (node.parentId === parentId) { const children = getTreeList(treeData, node.id); if (children.length) { node.children = children; } result.push(node); } } return result; } ``` 其中,`treeData` 是原始的树形数据,`parentId` 是当前节点的父节点 ID。首先创建一个空数组 `result`,然后遍历原始数据,找到所有父节点 ID 为当前节点 ID 的子节点,并递归获取子节点的子节点,直到没有子节点为止。如果当前节点有子节点,则将子节点数组添加到当前节点的 `children` 属性中,最后将当前节点添加到 `result` 数组中并返回。 使用示例: ```javascript const treeData = [ { id: 1, name: 'Node 1', parentId: null }, { id: 2, name: 'Node 2', parentId: 1 }, { id: 3, name: 'Node 3', parentId: 1 }, { id: 4, name: 'Node 4', parentId: 2 }, { id: 5, name: 'Node 5', parentId: 3 }, { id: 6, name: 'Node 6', parentId: null }, { id: 7, name: 'Node 7', parentId: 6 }, ]; const treeList = getTreeList(treeData); console.log(treeList); ``` 输出结果: ``` [ { "id": 1, "name": "Node 1", "parentId": null, "children": [ { "id": 2, "name": "Node 2", "parentId": 1, "children": [ { "id": 4, "name": "Node 4", "parentId": 2 } ] }, { "id": 3, "name": "Node 3", "parentId": 1, "children": [ { "id": 5, "name": "Node 5", "parentId": 3 } ] } ] }, { "id": 6, "name": "Node 6", "parentId": null, "children": [ { "id": 7, "name": "Node 7", "parentId": 6 } ] } ] ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值