列表數據轉樹形數據

AlienZHOU 發布于2019-08-21 18:29 / 2614人閱讀

let listToTree = (list, id = "id", pId = "pId") => {
    let map = {},
        listMap = {},
        rootList = [];
    for (let i = 0, max = list.length; i < max; i++) {
        let one = Object.assign({}, list[i]);
        map[one[id]] = one;
        if (listMap[one[id]]) {
            one.children = listMap[one[id]];
        }
        if (one.hasOwnProperty(pId) && one[pId] !== "") {
            if (map[one[pId]]) {
                let c = map[one[pId]].children || (map[one[pId]].children = []);
                c.push(one);
            } else {
                if (!listMap[one[pId]]) listMap[one[pId]] = [one];
                else listMap[one[pId]].push(one);
            }
        } else {
            rootList.push(one);
        }
    }
    return { list: rootList, map };
};

使用

let data=[{
    id:1,
    text:"1"
},{
    id:2,
    pId:1,
    text:"2"
}];

let tree=listToTree(data);

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90514.html

前端筆試題：數組轉樹形結構

摘要：初始化數據輸出結果轉換函數這個轉換函數不受數據關系層級的限制，無論有多少層關系，只要一次循環就能搞定。所有人拿一根線，從他自己的位置開始，走到他父親的位置，那么這個樹形結構就完成了。只要每個節點都做完了，樹形就出來了。初始化數據 var data = [ { parentId: 0, id: 1, value: 1 }, { parentId: 3, id: 2, v...

molyzzx 2019-08-23 15:54 評論0 收藏0
一個基于vue和element-ui的樹形穿梭框組件

摘要：在市面上找到一個好用的樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在之外引入其他重量級插件，因此就有了。版本增加穿梭框左側右側數據勾選事件，穿梭框左側右側底部。 el-tree-transfer 簡介·請先閱讀文檔及版本說明因為公司業務使用vue框架，ui庫使用的element-ui。在市面上找到一個好用的vue樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在element-ui之...

Corwien 2019-08-22 18:33 評論0 收藏0
localStorage實現本地儲存樹形菜單

摘要：因為任務需要添加到樹的結構上，所以要記錄任務是添加到哪個結點上的，需要為每個樹結點添加一個作為標識以便于在結點上添加任務，樹狀結構中每個結點的按照樹的先序遍歷將結點的依次儲存于數組中。 localStorage實現本地儲存樹形菜單最近在寫一個Todo-list的頁面，頁面布局和操作都寫完后，想要用localStorage實現本地儲存。然而對儲存數據的方法一無所知，就先去了解了web的...

William_Sang 2019-08-21 10:56 評論0 收藏0