js再帰生成ツリー構造、
3847 ワード
バックエンドはjson配列を取得し,ツリー構造になり,以下は直接コードを上げる.
まず集合のデータフォーマットはこうです.
データ:
ツリー構造コードを生成するには、次の手順に従います.
変換後のデータ:
まず集合のデータフォーマットはこうです.
データ:
[
{
"id": 1,
"name": "11111111 ",
"parentId": 0
},
{
"id": 2,
"name": "2 ",
"parentId": 0
},
{
"id": 4,
"name": "1 2",
"parentId": 1
},
{
"id": 6,
"name": " ",
"parentId": 4
},
{
"id": 12,
"name": "566666",
"parentId": 2
},
{
"id": 13,
"name": "33333 ",
"parentId": 0
},
{
"id": 14,
"name": "7567566765",
"parentId": 13
},
{
"id": 15,
"name": "1312",
"parentId": 6
}
]
ツリー構造コードを生成するには、次の手順に従います.
load() {
loadCatOptions().then(res => {//
this.catOptions = this.generateOptions(res);
console.log(this.catOptions);
})
},
generateOptions(params) {// Cascader
var result = [];
for (let param of params) {
if (param.parentId == 0) {//
var parent = {// el-Cascader
'label': param.name,
'value': param.id
}
parent.children = this.getchilds(param.id, params);//
result.push(parent);
}
}
return result;
},
getchilds(id, array) {
let childs = new Array();
for (let arr of array) {//
if (arr.parentId == id) {
childs.push({
'label': arr.name,
'value': arr.id
});
}
}
for (let child of childs) {//
let childscopy = this.getchilds(child.value, array);//
console.log(childscopy)
if (childscopy.length > 0) {
child.children = childscopy;
}
}
return childs;
},
変換後のデータ:
[
{
"children": [
{
"children": [
{
"children": [
{
"label": "1312",
"value": 15
}
],
"label": " ",
"value": 6
}
],
"label": "1 2",
"value": 4
}
],
"label": "11111111 ",
"value": 1
},
{
"children": [
{
"label": "566666",
"value": 12
}
],
"label": "2 ",
"value": 2
},
{
"children": [
{
"label": "7567566765",
"value": 14
}
],
"label": "33333 ",
"value": 13
}
]