JS當中的無限分類遞歸樹

 

列表轉換成樹形結構方法定義：

//javascript  樹形結構
function toTree(data) {
    // 刪除 所有 children,以防止多次調用
    data.forEach(function(item) {
        delete item.children;
    });

    // 將數據存儲為 以 id 為 KEY 的 map 索引數據列
    var map = {};
    data.forEach(function(item) {
        // 在該方法中可以給每個元素增加其他屬性
        item.text = item.name;
        map[item.id] = item;
    });
    //  console.log(map);

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

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

        // 好繞啊，如果找到索引，那么說明此項不在頂級當中,那么需要把此項添加到，他對應的父級中
        if (parent) {
            // 可以給每個父節點添加屬性
            parent.iconCls = "i-folder";
            //  添加到父節點的子節點屬性中
            (parent.children || (parent.children = [])).push(item);

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

 

樹形結構數據：

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

 

 

版權聲明：本文為CSDN博主「花村大地主」的原創文章，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/jayhkw/article/details/68945087