js處理樹形結構資料過濾

2021-10-09 10:44:49 字數 663 閱讀 2550

最近專案經常遇到後台介面返回整個樹形結構,而前端展示只需要展示部分型別的資料,需要過濾一下,所以整理了乙個過濾方法。

非層級結構時過濾非常簡單,只需要一層**就夠了

export function filtertree (tree)
而要做到子節點也過濾時就需要用到遞迴去過濾

思路梳理:迴圈陣列,然後過濾資料,如果有子節點,子節點過濾,把子節點傳給遞迴函式

實現:

export function filtertree (tree, arr = ) 

// 然後新增到新陣列中

arr.push(node)

// 如果有子節點,呼叫遞迴函式,並把空陣列傳給下乙個函式

// 利用引用資料型別的特性,實現淺拷貝

// 遞迴函式過濾時會改變這個空陣列資料,從而實現層級結構過濾

if (item.children && item.children.length)

}return arr

}

過濾條件可以根據實際情況修改,這個函式是根據節點的type進行過濾

而此次函式的迷惑點便是根據引用資料的特點,向下次遞迴函式傳遞chilren陣列,當下次遞迴函式改變chilren時,首層的chilren也會隨之改變,從而達到樹級結構屬性過濾的功能

樹形結構資料處理

前端使用 構造樹型結構資料 param data 資料來源 param depid 兒子節點id欄位 預設 depid param parentid 父節點id欄位 預設 parentid param children 孩子節點資料儲存字段 預設 children param rootid 根id ...

js將資料轉成樹形結構

有如下資料,陣列中為一條條單個資料,每條資料都有唯一的id標識,pid表示此條資料的父級 id,根據pid和id的對應關係,實現乙個函式將資料轉成樹形結構資料。var data 思路 根據 id 唯一這一條件,可先使用 物件或者map結構 名為obj 將資料儲存起來,鍵名就為 id,值為對應資料,然...

Vue樹形資料處理 js

當前需求 層級列表中選中某個元素,則獲取最底層子集id,並用逗號連線 1,2,3,4,5 let data 遍歷方法可參考 寫的很詳細 具體操作 首先找到選擇元素的id在樹形資料中的位置,並獲取他 findsameid tree,id if id tree i id isget deepsearch...