js树形数据处理--树形数据转换，获取指定类型节点下的所有子节点或指定类型下的所有父节点

常用的UI组件为我们提供了很便捷的树形展示和操作方案，例如ant,element,Iview等Tree组件；
以此为基础，无论是友好的java同学直接给你treeList 还是平级结构下的前端组装数据的处理仍需要使用者自己来动手
为了事半功倍工具函数是不可少的
1.树形数据组装：

   /*** @Description:sourceData数据源* @Author: ShiWei* @Date: 2020-11-04*/
export const createTree = function (sourceData,id,pid) {// 转换成插件需要格式的树结构// const id = id// const pid = pid// 深拷贝const data = sourceData.map(item => {return Object.assign({}, item)})const res = []const temp = {}for (let i = 0; i < data.length; i++) {temp[data[i][id]] = data[i]}for (let k = 0; k < data.length; k++) {if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {if (!temp[data[k][pid]].children) {temp[data[k][pid]].children = []}if (!temp[data[k][pid]]._level) {temp[data[k][pid]]._level = 1}data[k]._level = temp[data[k][pid]]._level + 1temp[data[k][pid]].children.push(data[k])} else {res.push(data[k])}}return res
}

2.获取节点所有父节点

/*** 深度优先遍历树* 一个递归方法* @params id:当前节点* @params data:原始数据* @params deptId:当前遍历节点的父级节点id，初始为null(deptId)**/getFathersById(id, data, prop = 'deptId') {var arr = []const rev = (data, IDS) => {for (var i = 0, length = data.length; i < length; i++) {const node = data[i]if (node[prop] === IDS) {arr.unshift(node[prop])return true} else {if (node.children && node.children.length) {if (rev(node.children, IDS)) {arr.unshift(node[prop])return true}}}}return false}rev(data, id)return arr
},

3.获取指定节点所有父节点

   tree: [{"id": "71be0269ef4a4afa8c76b5e1500904b7","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "TAN档案管理","editType": "0","classifyType": "项目","sort": null,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": null,"createBy": null,"modifiedBy": null,"parentId": "0","programId": null,"templateid": null,"children": [{"id": "74b24fd213df44b1a7589e3f88694391","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "施工单位","editType": "0","classifyType": "施工单位","sort": 3,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": null,"createBy": null,"modifiedBy": null,"parentId": "71be0269ef4a4afa8c76b5e1500904b7","programId": null,"templateid": null,"children": [{"id": "b0e3c550761049c09ba35b08a55c4d48","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "深圳01施工合同段","editType": "0","classifyType": "施工合同段","sort": 1,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": "bd0ebe78f54e401d88e62f8747a057a1","ownerId": null,"createBy": null,"modifiedBy": null,"parentId": "74b24fd213df44b1a7589e3f88694391","programId": null,"templateid": null,"children": [{"id": "154b6175ccad40f486f0264f404e2c9c","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "1","editType": "0","classifyType": "案卷分类","sort": 133,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba","createBy": null,"modifiedBy": null,"parentId": "b0e3c550761049c09ba35b08a55c4d48","programId": null,"templateid": null,"children": null,"operable": "1"}, {"id": "58805d3b7d7447199f620eed384f74d0","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "新增案卷分类112","editType": "0","classifyType": "案卷分类","sort": 134,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba","createBy": null,"modifiedBy": null,"parentId": "b0e3c550761049c09ba35b08a55c4d48","programId": null,"templateid": null,"children": null,"operable": "1"}, {"id": "59b41972221f4aa09d0f34c153db25da","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "子节点1","editType": "0","classifyType": "案卷分类","sort": 135,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba","createBy": null,"modifiedBy": null,"parentId": "b0e3c550761049c09ba35b08a55c4d48","programId": null,"templateid": null,"children": null,"operable": "1"}, {"id": "fb5b90951f13487ebf096c752546a56e","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "文件011","editType": "0","classifyType": "案卷分类","sort": 136,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": "f8c4a36f9ce44083bf350e5fb16814ba","createBy": null,"modifiedBy": null,"parentId": "b0e3c550761049c09ba35b08a55c4d48","programId": null,"templateid": null,"children": null,"operable": "1"}, {"id": "f0ba629b163d426fb6a5a5ab50d9ae6c","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "测试导出专用案卷节点","editType": "1","classifyType": "案卷分类","sort": 164,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": null,"createBy": null,"modifiedBy": null,"parentId": "b0e3c550761049c09ba35b08a55c4d48","programId": null,"templateid": null,"children": null,"operable": "1"}, {"id": "d962ac1f4d164169a022292872f6951c","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "测试案卷移动","editType": "1","classifyType": "案卷分类","sort": 166,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": null,"ownerId": null,"createBy": null,"modifiedBy": null,"parentId": "b0e3c550761049c09ba35b08a55c4d48","programId": null,"templateid": null,"children": null,"operable": "1"}],"operable": "1"}, {"id": "ca953f2d8b604d1d97b14495363441e4","appId": "503f49ba244d4f5ab8f235d123772091","tenantId": "ae5683314e5c48b3b8eb1df2dac4c6fa","gmtCreate": null,"gmtModified": null,"deleteStatus": 0,"name": "深圳02施工合同段","editType": "0","classifyType": "施工合同段","sort": 2,"fileType": null,"projectId": "d0b033e2b4614a9882fb12bbe45960c5","contractId": "fe465ae6e5444dd684196f127f07dd1d","ownerId": null,"createBy": null,"modifiedBy": null,"parentId": "74b24fd213df44b1a7589e3f88694391","programId": null,"templateid": null,"children": null,"operable": "1"}],"operable": "1"}],"operable": null}]Farthloops（data）/*** @Description:获取指定节点下下的所有子节点* @Author: ShiWei* @Date: 2020-11-04*/const targetData = {};Farthloops(data, parent) {return data.map(({ children, title: value }) => {const node = {value,parent}targetData[value] = node;node.children = Farthloops(children, node);return})}//获取数据节点getFarthNode(value) {let node = [];let currentNode = targetData[value];node.push(currentNode.value);if (currentNode.parent) {node = [...getFarthNode(currentNode.parent.value), ...node];}return node}//获取父节点console.log(const target = getNode('id'))

4.指定节点获取所有子节点

/*** @Description:获取指定节点下下的所有子节点* @Author: ShiWei* @Date: 2020-11-04*/getChildNode(nodes, item, arr) {for (let el of nodes) {if (el.parentId === item) {arr.push(el.id);if (el.children) {this.childsNodeDeepWay(el.children, arr);}} else if (el.children) {this.getChildNode(el.children, item, arr);}}return arr;},childsNodeDeepWay(nodes, arr) {if (nodes)nodes.forEach((ele) => {arr.push(ele.id);if (ele.children) {this.childsNodeDeepWay(ele.children, arr);}});},//调用console.log( this.getChildNode(this.tree,this.tree[0].id,[]))

js树形数据处理--树形数据转换，获取指定类型节点下的所有子节点或指定类型下的所有父节点相关推荐

js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&q ...
MFC动态建立二叉树、序列检错以及获取父节点
根据前序+中序或中序+后序在MFC中实现动态建立二叉树. 文章目录根据前序+中序或中序+后序在MFC中实现动态建立二叉树. 前言一.动态建立二叉树 1.题目要求 2.具体实现 1.对话框布局 2. ...
easyui的tree获取父节点_力扣 1519——子数中标签相同的节点数
本题主要在于对树这种数据结构的考察,以及深度优先遍历的使用,优化时可以采取空间换时间的策略. 原题给你一棵树(即,一个连通的无环无向图),这棵树由编号从 0 到 n - 1 的 n 个节点组成,且恰 ...
div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值
注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点 ...
# 如何获取父节点和子节点
文章目录一.获取父级节点二.获取子节点 1.获取子节点 2.获取指定子节点三.总结一.获取父级节点 node.parentNode 代码如下(示例): <!DOCTYPE html> ...
js 树形结构数据已知某一子节点一次向上获取所有父节点
已知树形结构 res.现在有一个对象是{code: 1,name: "水上分局"},想向上依次获取取得父级,比如说水上分局父节点是汉阳区汉阳区父节点是武汉市武汉市父节点是湖北 ...
layui如何获取父节点的父节点_layui树形组件（右键、父节点选中子节点全被选中）...
一:右键菜单: layui里面没有给到右键菜单,所以,我自己把源码改了一下: 找到layui文件夹里modules下的tree.js 用以上代码,替换以下代码当i.which等于3,是右键事件,等于 ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
elementui tree获取父节点_vue_elementUI_ tree树形控件获取选中的父节点ID
一, vue_elementUI_ tree树形控件 1.1默认点击tree节点的第一个(注意不是checked选中) :expand-on-click-node="false" ...
树形结构数据，已知某一子节点，一次向上获取所有父节点
树形结构数据, 已知某一子节点 ,一次向上获取所有父节点 //tree: 树形结构, menuid: 已知节点属性,(代码中判断id相等) function treeFindPath(tree, me ...

js树形数据处理--树形数据转换，获取指定类型节点下的所有子节点或指定类型下的所有父节点

js树形数据处理--树形数据转换，获取指定类型节点下的所有子节点或指定类型下的所有父节点相关推荐

最新文章

热门文章