在使用樹形節點或級聯組件時常常會碰到根據id處理資料的情況
下面為大家簡單介紹關于節點遞回增刪改查方法
- 根據目標id洗掉指定節點
/**
* 根據目標id洗掉指定節點
* @param {*} list 資料源
* @param {*} targetId 目標id
*/
function deleteNodeById(list, targetId) {
if (!list) return
list.forEach((item, index) => {
if (item.id === targetId) {
list.splice(index, 1)
return
} else {
if (Array.isArray(item.children) && item.children.length) {
deleteNodeById(item.children, targetId)
}
}
})
}
- 根據目標id查找指定節點
/**
* 根據目標id查找指定節點
* @param {*} list 資料源
* @param {*} targetId 目標id
*/
function selectNodeById(list, targetId) {
if (!list) return
let nodeTree = null
for (let i = 0; i < list.length; i++) {
if (nodeTree !== null) break
let node = list[i];
if (node.id === targetId) {
nodeTree = node
break
} else {
if (Array.isArray(node.children) && node.children.length) {
nodeTree = selectNodeById(node.children, targetId)
}
}
}
return nodeTree
}
- 添加節點到目標id下
/**
* 添加節點到目標id下
* @param {*} list 資料源
* @param {*} targetId 目標id
* @param {*} obj 目標物件
*/
function appendNodeById(list, targetId, obj) {
if (!list) return
list.forEach(item => {
if (item.id === targetId) {
item.children ? item.children.push(obj) : item['children'] = obj
} else {
if (Array.isArray(item.children) && item.children.length) {
appendNodeById(item.children, targetId, obj)
}
}
})
}
- 修改目標id資料
/**
* 修改目標id資料
* @param {*} list 資料源
* @param {*} targetId 目標id
* @param {*} obj 目標物件
*/
function updateNodeById(list, targetId, obj) {
if (!list) return
list.forEach((item, index) => {
if (item.id === targetId) {
list.splice(index, 1, obj)
return
} else {
if (Array.isArray(item.children) && item.children.length) {
updateNodeById(item.children, targetId, obj)
}
}
})
}
歡迎大家評論，如有幫助可以關注+收藏，我會經常更新博客，大家一起討論學習
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499370.html
標籤：其他