JS 树形数据处理

已于 2022-08-25 22:46:15 修改
阅读量1k 收藏 2
点赞数
文章标签： javascript 开发语言 ecmascript
于 2022-08-23 22:00:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40055200/article/details/126493131
版权

树形结构数据

let arr = [
        {
            "platformId":"461417688549658625",
            "platformName":"蘑菇小姐的测试平台",
            "roles":[
                {
                    "roleId":968589,
                    "roleName":"平台管理员"
                }
            ]
        },
        {
            "platformId":"419419609251475533",
            "platformName":"昨日头条",
            "roles":[
                {
                    "roleId":968576,
                    "roleName":"丑角"
                },
                {
                    "roleId":968574,
                    "roleName":"平台管理员"
                }
            ]
        },
        {
            "platformId":"419419609251475530",
            "platformName":"今日头条",
            "roles":[
                {
                    "roleId":968570,
                    "roleName":"大主播"
                }
            ]
        },
        {
            "platformId":"419419609251475529",
            "platformName":"张松测试平台",
            "roles":[
                {
                    "roleId":968569,
                    "roleName":"平台管理员"
                },
                {
                    "roleId":968568,
                    "roleName":"test"
                }
            ]
        },
        {
            "platformId":"419419609251475527",
            "platformName":"新建测试平台",
            "roles":[
                {
                    "roleId":968560,
                    "roleName":"平台管理员"
                }
            ]
        },
        {
            "platformId":"30205329925878161",
            "platformName":"wxy的测试平台",
            "roles":[
                {
                    "roleId":968587,
                    "roleName":"运营"
                },
                {
                    "roleId":968556,
                    "roleName":"船长"
                },
                {
                    "roleId":968555,
                    "roleName":"副船长"
                }
            ]
        },
        {
            "platformId":"30205329925878041",
            "platformName":"平台权限管理系统",
            "roles":[
                {
                    "roleId":968495,
                    "roleName":"平台普通用户"
                },
                {
                    "roleId":968466,
                    "roleName":"普通管理员"
                },
                {
                    "roleId":2,
                    "roleName":"平台管理员"
                },
                {
                    "roleId":1,
                    "roleName":"超级管理员"
                }
            ]
        },
        {
            "platformId":"30205329925877901",
            "platformName":"DPS-数字化采购平台-供应商端",
            "roles":[
                {
                    "roleId":968565,
                    "roleName":"平台管理员"
                }
            ]
        },
        {
            "platformId":"43",
            "platformName":"管理",
            "roles":[
                {
                    "roleId":968494,
                    "roleName":"gg"
                },
                {
                    "roleId":968493,
                    "roleName":"gg"
                },
                {
                    "roleId":968492,
                    "roleName":"普通用户"
                },
                {
                    "roleId":968491,
                    "roleName":"平台管理员"
                }
            ]
        },
        {
            "platformId":"42",
            "platformName":"vip",
            "roles":[
                {
                    "roleId":968490,
                    "roleName":"平台管理员"
                }
            ]
        },
        {
            "platformId":"41",
            "platformName":"test平台1",
            "roles":[
                {
                    "roleId":968548,
                    "roleName":"哈_哈%"
                },
                {
                    "roleId":968532,
                    "roleName":"平台管理员"
                },
                {
                    "roleId":968477,
                    "roleName":"平台管理员"
                },
                {
                    "roleId":968476,
                    "roleName":"role1"
                }
            ]
        }
    ]

在vue中的写法：

1.树形数据转成数组

<template>
  <div class="hello">
    <a-tree
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="gData"
        @expand="onExpand"
        @select="onSelect"
        checkable
        v-model="checkedKeys"
    >
      <template slot="title" slot-scope="{ title }">
              <span v-if="title.indexOf(searchValue) > -1">
                {{ title.substr(0, title.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
        <span v-else>{{ title }}</span>
      </template>
    </a-tree>
  </div>
</template>

<script>
// json数据如上
import ListData from './data.json'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      expandedKeys: [],
      autoExpandParent: true,
      gData: [],
      selectedKeys:[],
      checkedKeys: []
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val);
    },
  },
  mounted () {
    // 把树形结构的属性名称换成key,title
    const arr = ListData.result
    const newArr = JSON.parse(JSON.stringify(arr).replace(/roleId/g, 'key').replace(/roleName/g, 'title').replace(/roles/g, 'children').replace(/platformName/g, 'title').replace(/platformId/g, 'key'))
    this.gData = newArr

    // 树形转成数组
    const newList = this.arrayToTree(this.gData)
    console.log(newList,'树形转成数组')
  },
  methods: {
    arrayToTree (data) {
      const result = []
      data.forEach(item => {
        const loop = data => {
          result.push({
            key: data.key,
            title: data.title
          })
          const child = data.children
          if (child) {
            for (let i = 0; i < child.length; i++) {
              loop(child[i])
            }
          }
        }
        loop(item)
      })
      return result
    },
    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onTreeChange (e) {
      // const value = e.target.value
      console.log(e)
      // const expandedKeys = dataList
      //   .map(item => {
      //     if (item.title.indexOf(value) > -1) {
      //       return getParentKey(item.key, gData)
      //     }
      //     return null
      //   })
      //   .filter((item, i, self) => item && self.indexOf(item) === i)
      // Object.assign(this, {
      //   expandedKeys,
      //   searchValue: value,
      //   autoExpandParent: true
      // })
    }
  }
}
</script>

2.数组转换成树形

3.递归使用，遍历查找出树形中是否包含某个特定的值（id）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onTreeChange" />
    <a-tree
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="gData"
        @expand="onExpand"
        @select="onSelect"
        checkable
        v-model="checkedKeys"
    >
      <template slot="title" slot-scope="{ title }">
              <span v-if="title.indexOf(searchValue) > -1">
                {{ title.substr(0, title.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
        <span v-else>{{ title }}</span>
      </template>
    </a-tree>
  </div>
</template>

<script>
import ListData from './data.json'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      gData: [],
      selectedKeys:[],
      checkedKeys: []
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val);
      val.map(item => {
        // item相当于id,传的419419609251475533，0等值
        // 根据id查找树形数据中的某个值
        const arr = this.deepQuery(this.gData,item)
        console.log(arr,'arr')
      })
    },
  },
  mounted () {
    // 把树形结构的属性名称换成key,title(修改对象数组里的对象属性名)
    const arr = ListData.result
    const newArr = JSON.parse(JSON.stringify(arr).replace(/roleId/g, 'key').replace(/roleName/g, 'title').replace(/roles/g, 'children').replace(/platformName/g, 'title').replace(/platformId/g, 'key'))
    this.gData = newArr
    
  },
  methods: {
    
    deepQuery (tree, id) {
      var isGet = false
      var retNode = null
      function deepSearch (tree, id) {
        for (var i = 0; i < tree.length; i++) {
          if (tree[i].children && tree[i].children.length > 0) {
            deepSearch(tree[i].children, id)
          }
          if (id === tree[i].key || isGet) {
            tree[i].checkabled = true
            isGet || (retNode = tree[i])
            isGet = true
            break
          }
        }
      }
      deepSearch(tree, id)
      return retNode
    },
onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onTreeChange (e) {
      // const value = e.target.value
      console.log(e)
      // const expandedKeys = dataList
      //   .map(item => {
      //     if (item.title.indexOf(value) > -1) {
      //       return getParentKey(item.key, gData)
      //     }
      //     return null
      //   })
      //   .filter((item, i, self) => item && self.indexOf(item) === i)
      // Object.assign(this, {
      //   expandedKeys,
      //   searchValue: value,
      //   autoExpandParent: true
      // })
    }
  }
}
</script>

4.递归获取树数据对应的值（获取选中的id的对应的全部拿出来，点击时只能获取到key值，要把key值对应的都拿出来放到数组里）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onTreeChange" />
    <a-tree
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="gData"
        @expand="onExpand"
        @select="onSelect"
        checkable
        v-model="checkedKeys"
    >
      <template slot="title" slot-scope="{ title }">
              <span v-if="title.indexOf(searchValue) > -1">
                {{ title.substr(0, title.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
        <span v-else>{{ title }}</span>
      </template>
    </a-tree>
  </div>
</template>

<script>
import ListData from './data.json'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      gData: [],
      selectedKeys:[],
      checkedKeys: []
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val);
      // 递归获取树数据的对应值
      const arr = this.recursionChild(this.gData, val)
      console.log(arr,'递归获取树数据的对应值')
    },
  },
  mounted () {
    // 把树形结构的属性名称换成key,title(修改对象数组里的对象属性名)
    const arr = ListData.result
    const newArr = JSON.parse(JSON.stringify(arr).replace(/roleId/g, 'key').replace(/roleName/g, 'title').replace(/roles/g, 'children').replace(/platformName/g, 'title').replace(/platformId/g, 'key'))
    this.gData = newArr
    
  },
  methods: {
    /**
     * 获取tree对应code的值
     * arr 值数组
     * data tree数据
     */
    recursionChild (arr, data) {
      const name = []
      let Obj
      data.forEach(res => {
        Obj = arr.find(item => res === item.key)
        if (Obj) {
          name.push(Obj)
          if (Obj.children) data = Obj.children
        }
      })
      return name
    },
onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onTreeChange (e) {
      // const value = e.target.value
      console.log(e)
      // const expandedKeys = dataList
      //   .map(item => {
      //     if (item.title.indexOf(value) > -1) {
      //       return getParentKey(item.key, gData)
      //     }
      //     return null
      //   })
      //   .filter((item, i, self) => item && self.indexOf(item) === i)
      // Object.assign(this, {
      //   expandedKeys,
      //   searchValue: value,
      //   autoExpandParent: true
      // })
    }
  }
}
</script>

 5.遍历树形结构(Tree)，根据id找到对应的name(递归)

6.遍历树形结构并返回所有的子节点id值

function lookForAllId(data = [], arr = []) {
    for (let item of data) {
        arr.push(item.id)
        if (item.children && item.children.length) lookForAllId(item.children, arr)
    }
    return arr
}
console.log(lookForAllId(treeData));

首先肯定是需要进行循环的，我使用的是for of循环
假设tree数据是一个[{},{}]这样类型的
那么直接将id值push进去就可以了
如果{}中有children这个字段的话
我们需要判断是否有children并且长度是否大于0
if (item.children && item.children.length)
如果有的话
我们需要自己调用自己并且需要传递参数给自己
第一个参数肯定被遍历的值；也就是 item.children
第二个参数是arr,用来需要返回的所有id值
-----------------------------------
js遍历树形结构并返回所有的子节点id值

7.递归给每一项加一个属性值

function lookForAllId(tree) {
    for (let i = 0; i < tree.length; i++) {
        tree[i].scopedSlots = {title: 'title'}
        if(tree[i].children && tree[i].children.length) {
          this.formatData(tree[i].children)
        }
      }
      return tree;
}
console.log(lookForAllId(tree));

qq_40055200
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现树形结构化
歌谣的博客
03-26 3073
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注小歌谣 日常分享前后端知识 前言 今天来讲一下平常我们做权限系统中的树形结构知识 就是如何把对应关系的结构数据转换为可以一个树形结构 const data = [ { id: 2, pid: 0, path: '/course', name: 'Course', title: '课程管理' }, { id: 3, name: 'CourseOperate', path: 'o.
js树形结构数据处理
写点什么好
05-19 378
【代码】js树形结构数据处理。
js递归方式遍历寻找树形结构数据中的节点。
CodingNoob
02-03 1万+
最近突然兴起了解树形结构数据，所以一时兴起想了下要如果去实现在树状结构数据中遍历寻找想要的节点。 实现思路就是通过递归函数判断当前节点是否等于要找的节点id，如果不是再判断是否有children节点，再通过递归的方式将children节点传值到函数里面去调用这样就可以通过递归的方式遍历所有树形结构数据找到对应的节点。 let data = [ { ...
vue3的slot插槽用法，`slot-scope` are deprecated
热门推荐
浩星
02-09 2万+
前言： vue3的插槽使用方法发生了改变，和vue2相比较。 使用vue2的写法，会报错： `slot-scope` are deprecated vue2：上下对应，title是自己随便起的名字 1、定义一个普通的插槽，可以用div，任何标签 <div slot="title"></div> 2、定义一个element列表里面插槽的标签 <div slot="title" slot-scope="scope"></div> .
js中树形结构修改自定义选择层级属性值
Lingyv77的博客
10-20 2477
js中树形结构修改自定义选择层级属性值
js实现树形数据转成扁平数据的方法示例
10-15
在JavaScript中，处理数据结构时，我们经常需要将复杂的数据模型转换为更易于...循环实现虽然需要更多步骤，但可以更好地控制内存使用，适用于大规模数据处理。在实际应用中，应根据具体需求和数据规模选择合适的方法。
使用jsTree实现js树形结构
06-07
jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个易于理解和使用的工具。通过这个库，你...
js 将线性数据转为树形的示例代码
10-16
"兰桂坊" }, { id: 9, parent_id: 2, name: "东莞市" }, { id: 10, parent_id: 9, name: "长安镇" }, { id: 11, "parent_id...在JavaScript中，有许多库如`lodash`或自定义方法可以帮助处理树形数据的增删改查等操作。
javascript将扁平的数据转为树形结构的高效率算法
10-15
在JavaScript编程中，将扁平的数据结构转换为树形结构是一项常见的任务，特别是在处理层级关系的数据时，如组织结构、菜单导航或文件系统等。在本文中，我们将深入探讨一种高效的算法，该算法可以将一维数组转换为...
原生JS树树形插件xntree.js
08-05
《原生JS树形插件xntree.js详解》 在现代前端开发中，树形结构的数据展示和操作是常见的需求，例如文件目录、组织架构等。原生JS树形插件xntree.js应运而生，它是一款轻量级、高性能的组件，专门用于构建树形结构，...
js实现树形结构，功能非常强大，而调用又非常简单
12-01
一个JS实现的树，功能非常强大，而调用又非常简单 刚刚在一个公司项目中用到，包括详细的帮助文档和函数说明，还有例子程序，一看就懂，希望对大家有所帮助
JSTree(js写的树形菜单，支持加载10000节点以上)
12-23
js树形菜单组件，主要解决大数据加载节点卡死问题。
JavaScript 处理树数据结构的方法示例
12-11
JavaScript 处理树结构数据 场景 即便在前端，也有很多时候需要操作 树结构 的情况，最典型的场景莫过于 无限级分类。之前吾辈曾经遇到过这种场景，但当时没有多想直接手撕 JavaScript 列表转树了，并没有想到进行封装。后来遇到的场景多了，想到如何封装树结构操作，但考虑到不同场景的树节点结构的不同，就没有继续进行下去了。 直到吾辈开始经常运用了 ES6 Proxy 之后，吾辈想到了新的解决方案！ 思考 问: 之前为什么停止封装树结构操作了？ 答: 因为不同的树结构节点可能有不同的结构，例如某个项目的树节点父节点 id 字段是 parent，而另一个项目则是 parentId
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本支持分级展开、收缩。
js实现树形图
09-03
简单易用的js实现树形图，适于通用目录树。现成源码，直接使用。
js获取树结构数据中默认节点的所有父节点
s_9527_s的博客
07-27 1948
获取树结构数据节点的所有父节点数据
js中遍历复杂对象属性并将属性构建成树形结构
m0_62317155的博客
05-09 598
js中遍历复杂对象属性并将属性构建成树形结构
js的递归函数——实现可收放的树形菜单
杜永康的博客
03-28 1733
树形菜单是一种常见的网站导航方式，它通常由多个层级的菜单项组成，每个菜单项可以有子菜单项。在JavaScript中，我们可以使用递归函数来实现树形菜单。树形菜单就是这样的东西，点击上一级，显示下一级，无限循环，一直逐层显示下一级。再次点击，关闭下一级。长的很像树，故名树形菜单。学会这个东西，是不是很酷？接下来，我们可以定义一个递归函数来遍历这个数据源，并且为每个菜单项添加点击事件。});
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
OUalen的博客
06-28 4437
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
js树状图数据处理递归
最新发布
08-05
引用中的tree函数将原始数据处理成树形层级关系。然后，你可以使用第二个引用中的findNodeById函数根据节点的id查找指定节点。最后，你可以使用第三个引用中的函数将一维数组转变为树形数据。 示例代码如下: ```javascript// 原始数据const treeData = [ { capList: [], fatherTreeCode: "", isLeaf: "0", treeLevel: "1", treeName: "根目录" }, { capList: [], fatherTreeCode: "TRE0rv", isLeaf: "0", showSeqno: "4", treeCode: "TRE0sw", treeLevel: "2", treeName: "物联网" }, { fatherTreeCode: "TRE0rv", isLeaf: "1", showSeqno: "4", treeCode: "TRE0xw", treeLevel: "2",＊＊＊

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值