關(guān)于樹節(jié)點遞歸問題 Tree

AAA
   AA1-1
   AA1-2
       AA2-1
           AA3-1
BBB
   BB1-1
   BB1-2
       BB2-1

比如上面一棵樹，我點擊AA3-1，我想獲取AA2-1，跟AA1-2以及頂級AAA里面的id，然后反過來，點擊父節(jié)點AAA，把AAA父節(jié)點下面的所有子節(jié)點id獲取到，這個該怎么弄呢？

下面一段代碼是遍歷樹節(jié)點

var data = [
        {
            id:1,
            name :"一級分類：1",
            pid :0,
        },
        {
            id:2,
            name :"二級分類：1",
            pid :1,
        },
        {
            id:22,
            name :"二級分類：1",
            pid :1,
        },
        {
            id:3,
            name :"三級分類：3",
            pid :2,
        },
        {
            id:12,
            name :"f級分類：2",
            pid :9,
        },
        {
            id:15,
            name :"f級分類：2",
            pid :12,
        },
        {
            id:13,
            name :"f級分類：2",
            pid :15,
        },
    ]

    function toTree(data) {
        // 刪除 所有 children,以防止多次調(diào)用
        data.forEach(function (item) {
            delete item.children;
        });

        // 將數(shù)據(jù)存儲為 以 id 為 KEY 的 map 索引數(shù)據(jù)列
        var map = {};
        data.forEach(function (item) {
            map[item.id] = item;
        });


        var val = [];
        data.forEach(function (item) {

            // 以當(dāng)前遍歷項，的pid,去map對象中找到索引的id
            var parent = map[item.pid];

            // 好繞啊，如果找到索引，那么說明此項不在頂級當(dāng)中,那么需要把此項添加到，他對應(yīng)的父級中
            if (parent) {

                (parent.children || ( parent.children = [] )).push(item);

            } else {
                //如果沒有在map中找到對應(yīng)的索引ID,那么直接把 當(dāng)前的item添加到 val結(jié)果集中，作為頂級
                val.push(item);
            }
        });
        return val;
        console.log(val,'=DDDDD');
    }

    console.log(toTree(data))

回答

編輯回答

愚念

既然在antd的標(biāo)簽下提問，那么antd組件的Tree就支持這個。請仔細查看api文檔。

2017年3月13日 06:45

編輯回答

故人嘆

function toTree(data) {
    // 刪除 所有 children,以防止多次調(diào)用
    data.forEach(function (item) {
        delete item.children;
    });

    // 將數(shù)據(jù)存儲為 以 id 為 KEY 的 map 索引數(shù)據(jù)列
    var map = {};
    data.forEach(function (item) {
        map[item.id] = item;
    });


    var val = [];
    data.forEach(function (item) {

        // 以當(dāng)前遍歷項，的pid,去map對象中找到索引的id
        var parent = map[item.pid];

        // 好繞啊，如果找到索引，那么說明此項不在頂級當(dāng)中,那么需要把此項添加到，他對應(yīng)的父級中
        if (parent) {

            (parent.children || ( parent.children = [] )).push(item);

        } else {
            //如果沒有在map中找到對應(yīng)的索引ID,那么直接把 當(dāng)前的item添加到 val結(jié)果集中，作為頂級
            val.push(item);
        }
    });
    return [map, val];
}

r = toTree(data);
map = r[0], root = r[1];

click = map[3]; //點擊AA3-1 拿到AA31
while (click.pid in map){
    console.log(map[click.pid]); //一路都是父類
    click = map[click.pid];
} 

click = map[1]; //點擊AAA
function printchild(node){
    if (node.children){
        node.children.forEach(function (item) {
            console.log(item); // 打印所有子類
            printchild(item);
        });
    }
}

2018年5月5日 02:32