原文链接：https://segmentfault.com/a/1190000018692367
https://www.51xuediannao.com/javascript/digui_shu.html
const data = [
{
"area_id": 5,
"name": "广东省",
"parent_id": 0,
},
{
"area_id": 6,
"name": "广州市",
"parent_id": 5,
},
{
"area_id": 7,
"name": "深圳市",
"parent_id": 5,
},
{
"area_id": 4,
"name": "北京市",
"parent_id": 3,
},
{
"area_id": 3,
"name": "北京",
"parent_id": 0,
},
{
"area_id": 2,
"name": "测试子地区",
"parent_id": 1,
},
{
"area_id": 1,
"name": "测试地区",
"parent_id": 0,
}
];
function toTreeData(data,pid){
function tree(id) {
let arr = []
data.filter(item => {
return item.parent_id === id;
}).forEach(item => {
arr.push({
area_id: item.area_id,
label: item.name,
children: tree(item.area_id)
})
})
return arr
}
return tree(pid) // 第一级节点的父id，是null或者0，视情况传入
};
toTreeData(data,0)
输出：
改进：
/**
*
* @param {*} replaceFields 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段
* {children:'myChildren', title:'myTitle', key:'myKey', parentKey:'myParentKey' }
* @returns
*/
function getFiledMaps(replaceFields) {
let filedMaps = {
key: "key",
title: "title",
children: "children",
parentKey: "parentKey",
};
if (replaceFields) {
filedMaps = replaceFields;
}
return filedMaps;
}
/**
* 将存在父子关系的 Aarry数据 转化成 Tree 结构
* @param {Array} srcArr
* @param {*} pKey 父节点的key,值为：null或0时，表示根节点
* @param {*} replaceFields 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段
* {children:'myChildren', title:'myTitle', key:'myKey', parentKey:'myParentKey' }
* @returns
*/
function toTreeData(srcArr, pkey, replaceFields) {
const filedMaps = getFiledMaps(replaceFields);
//pkey:父节点key
function treeData(pkey) {
let arr = [];
srcArr
.filter((item) => {
return item[filedMaps["parentKey"]] === pkey;
})
.forEach((item) => {
let node = {
key: item[filedMaps["key"]],
title: item[filedMaps["title"]],
children: treeData(item[filedMaps["key"]]),
parentKey: pkey,
};
arr.push(node);
});
return arr;
}
return treeData(pkey);
}
数据：
var data = [
{id: 1, address: "安徽", parent_id: 0},
{id: 2, address: "江苏", parent_id: 0},
{id: 3, address: "合肥", parent_id: 1},
{id: 4, address: "庐阳区", parent_id: 3},
{id: 5, address: "大杨镇", parent_id: 4},
{id: 6, address: "南京", parent_id: 2},
{id: 7, address: "玄武区", parent_id: 6},
{id: 8, address: "梅园新村街道", parent_id: 7},
{id: 9, address: "上海", parent_id: 0},
{id: 10, address: "黄浦区", parent_id: 9},
{id: 11, address: "外滩", parent_id: 10},
{id: 12, address: "安庆", parent_id: 1}
];
根据最后一个找到整个家族（家谱树）
//根据最后一个找到整个家族
function familyTree(arr, pid) {
var temp = [];
var forFn = function(arr, pid){
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.id == pid) {
temp.push(item);
forFn(arr,item.parent_id);
}
}
};
forFn(arr, pid);
return temp;
}
//console.log(familyTree(data,10));
从顶级往下找到所有的子子孙孙（子孙树）
//子孙树，从顶级往下找到是有的子子孙孙
function sonsTree(arr,id){
var temp = [],lev=0;
var forFn = function(arr, id,lev){
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.parent_id==id) {
item.lev=lev;
temp.push(item);
forFn(arr,item.id,lev+1);
}
}
};
forFn(arr, id,lev);
return temp;
}
//console.log(sonsTree(data,0));
利用子孙树生成一个树形dom结构（实例）
//利用 子孙树 生成dom结构
var tree = sonsTree(data,0);
var temp = [];
for(var i=0;i<tree.length;i++){
var item = tree[i],u = "";
if(i>0){
u = "</ul>";
}
if(item['lev']==0){
temp.push(u+'<li><a class="one">'+item.address+'</a><ul>');
}else{
temp.push('<li><a>'+item.address+'</a></li>')
}
if(i+1==tree.length){
temp.push("</ul>")
}
}
//console.log(temp.join(""));
treeUtil.js
使用 vue-adnt的tree组件 时，可以使用 treeUtil.js 进行数据适配
/**
* 获取原数据结构的映射字段
* @param {*} replaceFields 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段
* {children:'myChildren', title:'myTitle', key:'myKey', parentKey:'myParentKey'，disabled:"myDisabled"}
* @returns
*/
function getFiledMaps(replaceFields) {
let filedMaps = {
key: "key",
title: "title",
children: "children",
parentKey: "parentKey",
disabled:"disabled",
disableCheckbox:"disableCheckbox",
};
if (replaceFields) {
filedMaps = replaceFields;
}
return filedMaps;
}
/**
* 将存在父子关系的 Aarry数据 转化成 Tree 结构
* @param {Array} srcArr
* @param {*} pKey 父节点的key,值为：null或0时，表示根节点
* @param {*} replaceFields 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段
* {children:'myChildren', title:'myTitle', key:'myKey', parentKey:'myParentKey'，disabled:"myDisabled"}
* @returns
*/
function toTreeData(srcArr, pkey, replaceFields) {
const filedMaps = getFiledMaps(replaceFields);
//pkey:父节点key
function treeData(pkey) {
let arr = [];
srcArr
.filter((item) => {
return item[filedMaps["parentKey"]] === pkey;
})
.forEach((item) => {
let node = {
key: item[filedMaps["key"]],
title: item[filedMaps["title"]],
children: treeData(item[filedMaps["key"]]),
parentKey: pkey,
disabled:item[filedMaps["disabled"]],
disableCheckbox:item[filedMaps["disableCheckbox"]],
};
arr.push(node);
});
return arr;
}
return treeData(pkey);
}
//根据某个节点，获取所有祖先节点
function getFamilyTreeNodes(treeData, pkey) {
var temp = [];
var forFn = function(treeData, pkey) {
for (var i = 0; i < treeData.length; i++) {
var item = treeData[i];
if (item.key == pkey) {
temp.push(item);
forFn(treeData, item.parentKey);
}
}
};
forFn(treeData, pkey);
return temp;
}
function findTreeNode(treeData, key) {
let parentNode = null;
var forFn = function(treeData, key) {
for (var i = 0; i < treeData.length; i++) {
var item = treeData[i];
if (item.key == key) {
parentNode = item;
break;
} else {
forFn(item.children, key);
}
}
};
forFn(treeData, key);
return parentNode;
}
function getFamilyTreeNodeKeys(treeData, key) {
const familykeys = [];
const currNode = findTreeNode(treeData, key);
if (currNode) {
const familyNodes = getFamilyTreeNodes(treeData, currNode.parentKey);
if (familyNodes) {
familyNodes.forEach((n) => {
familykeys.push(n.key);
});
}
}
return familykeys;
}
export { toTreeData, getFamilyTreeNodeKeys, getFamilyTreeNodes, findTreeNode };