鍍金池/ 問答/人工智能  HTML/ js嵌套對象已經(jīng)子集id,怎么查找所屬父級的所有id?

js嵌套對象已經(jīng)子集id,怎么查找所屬父級的所有id?

clipboard.png
要求效果,點(diǎn)擊任意checkbox時(shí),自動選中所屬的所有父級,父級和子集是單獨(dú)的,沒有全選關(guān)系;代碼結(jié)構(gòu)如下

[
        {
            "id": 1,
            "display_name": "儀表盤",
            "children": []
        },
        {
            "id": 2,
            "display_name": "用戶權(quán)限管理",
            "children": [
                {
                    "id": 3,
                    "display_name": "用戶列表",
                    "children": [
                        {
                            "id": 5,
                            "display_name": "創(chuàng)建管理員"
                        },
                        {
                            "id": 6,
                            "display_name": "刪除用戶"
                        },
                        {
                            "id": 7,
                            "display_name": "用戶禁用/取消禁用"
                        },
                        {
                            "id": 8,
                            "display_name": "更新用戶所在角色組"
                        }
                    ]
                },
                …………
回答
編輯回答
櫻花霓

如果層數(shù)確定的話,可以這樣做:

<script>
    var ad = [
        {
            "id": 1,
            "display_name": "儀表盤",
            "children": []
        },
        {
            "id": 2,
            "display_name": "用戶權(quán)限管理",
            "children": [
                {
                    "id": 3,
                    "display_name": "用戶列表",
                    "children": [
                        {
                            "id": 5,
                            "display_name": "創(chuàng)建管理員"
                        },
                        {
                            "id": 6,
                            "display_name": "刪除用戶"
                        },
                        {
                            "id": 7,
                            "display_name": "用戶禁用/取消禁用"
                        },
                        {
                            "id": 8,
                            "display_name": "更新用戶所在角色組"
                        }
                    ]
                }
            ]
        }];

    var the_id = 5;
    var the_select_id = [];

    for(var i in ad){
        if (ad[i].id !== the_id) {
            for(var j in ad[i].children) {

                if (ad[i].children[j].id !== the_id) {
                    for(var k in ad[i].children[j].children) {

                        if (ad[i].children[j].children[k].id == the_id) {
                            the_select_id.push(ad[i].children[j].children[k].id);
                            the_select_id.push(ad[i].children[j].id);
                            the_select_id.push(ad[i].id);
                        }
                    }
                } else {
                    the_select_id.push(ad[i].children[j].id);
                    the_select_id.push(ad[i].id);
                }
            }
        } else {
            the_select_id.push(ad[i].id);
        }
    }

    console.log(the_select_id);
</script>

效果如圖:

clipboard.png

當(dāng)然,代碼還可以精簡優(yōu)化,這里只是提供個(gè)參考

2018年9月3日 20:58