前言
我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是javascript树形结构化的讲解
环境配置
代码语言：javascript复制npm init -y
yarn add vite -D修改page.json配置端口
代码语言：javascript复制{
"name": "react_ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite --port 3002",
"server":"ts-node-dev ./server/app.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/express": "^4.17.17",
"@types/jquery": "^3.5.18",
"express": "^4.18.2",
"jquery": "^3.7.1",
"ts-node-dev": "^2.0.0",
"typescript": "^5.2.2",
"vite": "^4.4.9"
}
}数据部分
代码语言：javascript复制const data=[{
id:2,
pid:0,
path:'/course',
name:"Course",
title:"课程管理"
},{
id:3,
pid:2,
path:'/course',
name:"Course",
title:"歌谣管理"
},{
id:4,
pid:3,
path:'/course',
name:"Course",
title:"方方管理"
},
{
id:4,
pid:2,
path:'/course',
name:"Course",
title:"康康管理"
},
{
id:5,
pid:4,
path:'/course',
name:"Course",
title:"康康管理"
}
]
处理逻辑部分
代码语言：javascript复制function formatDataTree(data){
let parents=data.filter(p=>p.pid===0),
children=data.filter(c=>c.pid!==0)
dataToTree(parents,children)
console.log(parents)
function dataToTree(parents,children){
parents.map(p=>{
children.map((c,i)=>{
if(c.pid===p.id){
console.log("--------")
let _children=JSON.parse(JSON.stringify(children))
_children.splice(i,1)
console.log(_children,"_children is")
dataToTree([c],_children)
if(p.children){
p.children.push(c)
}else{
p.children=[c]
}
}
}
)
})
}
}
formatDataTree(data)运行结果
代码语言：javascript复制 [
{
"id": 3,
"pid": 2,
"path": "/course",
"name": "Course",
"title": "歌谣管理",
"children": [
{
"id": 4,
"pid": 3,
"path": "/course",
"name": "Course",
"title": "方方管理",
"children": [
{
"id": 5,
"pid": 4,
"path": "/course",
"name": "Course",
"title": "康康管理"
}
]
}
]
},
{
"id": 4,
"pid": 3,
"path": "/course",
"name": "Course",
"title": "方方管理"
}
]处理逻辑2
代码语言：javascript复制function formatDataTree(data){
let _data=JSON.parse(JSON.stringify(data))
return _data.filter(p=>{
const _arr=_data.filter(c=>c.pid===p.id);
_arr.length&&(p.children=_arr)
return p.pid===0
})
}运行结果
代码语言：javascript复制[
{
"id": 2,
"pid": 0,
"path": "/course",
"name": "Course",
"title": "课程管理",
"children": [
{
"id": 3,
"pid": 2,
"path": "/course",
"name": "Course",
"title": "歌谣管理",
"children": [
{
"id": 4,
"pid": 3,
"path": "/course",
"name": "Course",
"title": "方方管理",
"children": [
{
"id": 5,
"pid": 4,
"path": "/course",
"name": "Course",
"title": "康康管理"
}
]
}
]
},
{
"id": 4,
"pid": 2,
"path": "/course",
"name": "Course",
"title": "康康管理",
"children": [
{
"id": 5,
"pid": 4,
"path": "/course",
"name": "Course",
"title": "康康管理"
}
]
}
]
}
]
