基於簡易樹形元件初始版 資料處理的思考

2021-10-24 20:28:11 字數 1683 閱讀 4565

​ 樹元件給出的資料格式是這樣的：

const defaultdata =],


"collapsed"


:true


,"checked"


:false,}


,],"collapsed"


:true


,"checked"


:false,}


,],"collapsed"


:true


,"checked"


:true,}


,],"collapsed"


:true


,"checked"


:false,}


,],"collapsed"


:true


,"checked"


:true,}


],key:


"root"


}
​ 這個資料格式操作起來比較複雜，操作樹元件的時候每次更新都需要更新全部資料，想把它變成物件包含所有key的形式陣列，操作時這些資料只做展示，而不做處理（選中、摺疊的邏輯由單獨的資料state來處理）

​ 變更資料為如下所示:

,]


,'0-1':[


,],'0-1-1':[


],'0-1-2':[


],'0-2':[


],'0-2-1':[


]}
​操作的邏輯如下

const maparray =


(obj,array =


,keyarr =


['root'])


=>)}


else]}


let key =


[item.key,


...keyarr]


if(item.children && item.children !==0)


})return array


}let array =


maparray


(defaultdata)
​當你處理選中尋找父或子時如下操作

const selectedarray =[,


]const selectitem =


selectedarray.


push


(selectitem)


let newselectedarray = selectedarray.


filter


(item =>


json


.stringify


(selectitem.parentkey)


===json


.stringify


(item.parentkey)


)let keyarr = selectitem.parentkey


// 尋找子


const


mapchildren


=(selectitem,selectedarray)


=>)}


else


}mapchildren


(selectitem,selectedarray)


// 尋找父親


for(


let i=


0;i1;i++


)else


}

樹形結構資料處理

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

mysql樹形資料處理

在實際開發中，會遇到類似部門一樣的樹形資料的處理，即部門巢狀。主要是兩個方面，獲取某個部門的絕對路徑 普元資訊 企業交付部 研發部 張三 以及獲取到某個部門下所有的子部門資訊 獲取到的子部門id用，號拼接顯示 group concat函式 列轉行函式，將查詢出來的多個列的內容拼接成一行，並以，號分割...

Vue樹形資料處理 js

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