持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第3天,点击查看活动详情
数据源:
let adreeJson = [{
cat_id: 1,
cat_name: '大家电',
cat_pid: 0,
cat_level: 0,
cat_deleted: false,
children: [
{
cat_id: 3,
cat_name: '电视',
cat_pid: 1,
cat_level: 1,
cat_deleted: false,
children: [{
cat_id: 6,
cat_name: '曲面电视',
cat_pid: 3,
cat_level: 2,
cat_deleted: false,
}]
},
{
cat_id: 5,
cat_name: '空调',
cat_pid: 1,
cat_level: 1,
cat_deleted: false,
children: [{
cat_id: 8,
cat_name: '壁挂空调',
cat_pid: 5,
cat_level: 2,
cat_deleted: false,
}]
}
]
}]
方法一:
// 根据子id找父id,返回值不包含查找的id
function findParentsId(treeData, id) {
if (treeData.length == 0) return
for (let i = 0; i < treeData.length; i++) {
if (treeData[i].cat_id == id) {
return []
} else {
if (treeData[i].children) {
let res = findParentsId(treeData[i].children, id)
if (res !== undefined) {
return res.concat(treeData[i].cat_id).reverse()
}
}
}
}
}
function orgChildIdFindParent(childId, orgList) {
const result = findParentsId(orgList, childId).concat(childId)
return result || []
}
// 使用
let _arryDt = orgChildIdFindParent(6, adreeJson)
console.log(_arryDt)
方法二:
function doMatch(treeData, key) {
let arr = [];
let returnArr = [];
let depth = 0;
function childrenEach(childrenData, depthN) {
for (let j = 0; j < childrenData.length; j++) {
depth = depthN;
arr[depthN] = childrenData[j].cat_id;
if (childrenData[j].cat_id == key) {
returnArr = arr.slice(0, depthN + 1);
break;
} else {
if (childrenData[j].children) {
depth++;
childrenEach(childrenData[j].children, depth);
}
}
}
return returnArr;
}
return childrenEach(treeData, depth);
}
let arr = doMatch(adreeJson, 8);//Arr是后台返回的整个数组 id是获取当前节点的id
console.log(arr)//获取包括当前节点和所有父节点的id
方法三:可以自定义取父级的key值
/**
* 显示层级数据
* @param tree {Array} 树数据
* @param func {Function} 回调函数
* @param field {String} 字段名称
* @param path {Array} 路径数据
* @returns {*[]|[]|*}
*/
function treeFindPath(tree, func, field = "", path = []) {
if (!tree) return []
for (const data of tree) {
field === "" ? path.push(data) : path.push(data[field]);
if (func(data)) return path
if (data.children) {
const findChildren = treeFindPath(data.children, func, field, path)
if (findChildren.length) return findChildren
}
path.pop()
}
return []
}
let arr = treeFindPath(adreeJson, data => data.cat_id === 6, "cat_id");
let _nameArr=treeFindPath(adreeJson, data => data.cat_id === 6, "cat_name");
console.log(arr);
console.log(_nameArr);
方法四:可以获取父级节点详细的数据
function findIdList(list, id, children = 'children', level = 0) {
var arrRes = [];
let obj = {
cat_id: 0,
[children]: list
}
let rev = (data, id, level) => {
if (!data || !data[children] || !data[children].length) {
return;
}
for (var i = 0; i < data[children].length; i++) {
let item = data[children][i];
if (item.cat_id == id) {
let _obj = {
...item
}
delete _obj.children
arrRes.unshift({
level,
..._obj
});
// arrRes.unshift({
// level,
// cat_id: item.cat_id,
// cat_name: item.cat_name,
// cat_pid: item.cat_pid,
// cat_level: item.cat_level,
// cat_deleted: item.cat_deleted,
// });
// 递归它的父级
rev(obj, data.cat_id, 0);
break;
} else if (item[children] && item[children].length > 0) {
//如果有子集,则把子集作为参数重新执行本方法
rev(item, id, level + 1);
}
}
};
rev(obj, id, level);
return arrRes;
}
let pDt = findIdList(adreeJson, 6);
console.log(pDt)