鍍金池/ 問答/HTML/ 關(guān)于樹形結(jié)構(gòu)遞歸問題

關(guān)于樹形結(jié)構(gòu)遞歸問題

下面是接口模擬數(shù)據(jù),我需要根據(jù)不同父節(jié)點,用戶點擊會執(zhí)行不同邏輯,也就是通過遞歸方式,用戶任意點擊一個樹節(jié)點,怎么知道當前是第幾層節(jié)點

比如如果用戶點擊模塊節(jié)點,就讓頁面按鈕變灰,禁止用戶點擊,如果點擊績效,就讓按鈕恢復并高亮,允許用戶點擊,就是我怎么知道用戶點擊了哪個節(jié)點呢,不可能通過節(jié)點名字去判斷吧,節(jié)點有幾層是未知的
圖片描述

let arr = [{
        "id": 90,
        "name": "MS",
        "pareid": 0,
        "children": [{
            "id": 736,
            "name": "模塊",
            "pareid": 90,
            "children": [{
                "id": 739,
                "name": "資產(chǎn)",
                "pareid": 736,
                "children": [{
                    "id": 971,
                    "name": "績效",
                    "pareid": 739,
                }]
            }, {
                "id": 741,
                "name": "交易_a",
                "pareid": 736,
                "children": [{
                    "id": 742,
                    "name": "盤前",
                    "pareid": 741,
                }, {
                    "id": 743,
                    "name": "總覽",
                    "pareid": 741,
                }, {
                    "id": 744,
                    "name": "指令_a",
                    "pareid": 741,
                }, {
                    "id": 969,
                    "name": "證券",
                    "pareid": 741,
                }, {
                    "id": 972,
                    "name": "交易_s",
                    "pareid": 741,
                }, {
                    "id": 985,
                    "name": "_a監(jiān)控",
                    "pareid": 741,
                }, {
                    "id": 995,
                    "name": "期指",
                    "pareid": 741,
                }, {
                    "id": 1008,
                    "name": "監(jiān)_控",
                    "pareid": 741,
                }, {
                    "id": 1009,
                    "name": "信_息",
                    "pareid": 741,
                }, {
                    "id": 1010,
                    "name": "日_報",
                    "pareid": 741,
                }, {
                    "id": 1019,
                    "name": "歷史",
                    "pareid": 741,
                }, {
                    "id": 1032,
                    "name": "多基",
                    "pareid": 741,
                }, {
                    "id": 1033,
                    "name": "預警",
                    "pareid": 741,
                }, {
                    "id": 1034,
                    "name": "成交",
                    "pareid": 741,
                }, {
                    "id": 1035,
                    "name": "交易_2",
                    "pareid": 741,
                }, {
                    "id": 1036,
                    "name": "實時_w",
                    "pareid": 741,
                }, {
                    "id": 1037,
                    "name": "分析a",
                    "pareid": 741,
                }]
            }]
        }, {
            "id": 997,
            "name": "特殊",
            "pareid": 90,
            "children": [{
                "id": 996,
                "name": "所有",
                "pareid": 997,
            }, {
                "id": 1024,
                "name": "hg",
                "pareid": 997,
            }, {
                "id": 1025,
                "name": "管理",
                "pareid": 997,
            }, {
                "id": 1026,
                "name": "交易員",
                "pareid": 997,
            }, {
                "id": 1028,
                "name": "債_kl",
                "pareid": 997,
            }, {
                "id": 1029,
                "name": "理h員",
                "pareid": 997,
            }, {
                "id": 1040,
                "name": "模_e擬",
                "pareid": 997,
            }, {
                "id": 1041,
                "name": "清_df算",
                "pareid": 997,
            }, {
                "id": 1340,
                "name": "關(guān)聯(lián)_方",
                "pareid": 997,
            }, {
                "id": 1350,
                "name": "關(guān)聯(lián)r_方",
                "pareid": 997,
            }, {
                "id": 1351,
                "name": "關(guān)聯(lián)_n方",
                "pareid": 997,
            }, {
                "id": 1352,
                "name": "關(guān)聯(lián)v_方",
                "pareid": 997,
            }, {
                "id": 1353,
                "name": "關(guān)聯(lián)_g方",
                "pareid": 997,
            }, {
                "id": 1354,
                "name": "_1v1",
                "pareid": 997,
            }, {
                "id": 1355,
                "name": "_1vn",
                "pareid": 997,
            }]
        }]
    }];
    
    recursion = (cityData) => {
        for (let i = 0; i < cityData.length; i++) {
            const childs = cityData[i].children;
            if(childs && childs.length > 0) {// 如果還有子節(jié)點,執(zhí)行遞歸
                recursion(childs);
            }
        }
    }
    recursion(arr);
回答
編輯回答
久礙你

在每個child節(jié)點中放parent節(jié)點的引用,根節(jié)點的parent為null,然后在當前節(jié)點執(zhí)行:
var cnt = 0;
for (var n = currentNode; n.parent != null; n = n.parent) cnt++;

這樣循環(huán)結(jié)束后cnt就是當前節(jié)點的層數(shù)

2017年11月24日 04:12
編輯回答
朕略傻
recursion = (cityData, time = 0) => {
        // 根據(jù) time 來搞事情
        for (let i = 0; i < cityData.length; i++) {
            const childs = cityData[i].children;
            if(childs && childs.length > 0) {// 如果還有子節(jié)點,執(zhí)行遞歸
                recursion(childs, time + 1);
            }
        }
    }
    recursion(arr);

即可

2017年6月26日 17:28