[英]How to mark parent tree node as selected if all the child nodes are selected
I have a json that forms a tree.我有一个 json forms 一棵树。
[{
id: 1,
name: "A",
isSelected: false,
child: [
{
id: 2,
name: "B",
isSelected: false,
}
{
id: 3,
name: "C",
isSelected: false,
}
]
},
{
id: 4,
name: "D",
isSelected: false,
child: [
{
id: 5,
name: "E",
isSelected: false,
}
{
id: 6,
name: "F",
isSelected: false,
}
]
}]
Now I have an array of selected nodes现在我有一组选定的节点
[{id: 2},{id:3}]
And markSelectedNodes
method to mark the nodes as selected based on selected node array和
markSelectedNodes
方法根据选定的节点数组将节点标记为选中
markSelectedNodes(_nodes) {
_nodes.forEach((_node) => {
// match if node exists in selected nodes
const _isFound = this.selectedNodes.find((_selectedNode) => _selectedNode.id === _node.id);
if (_isFound) {
_node.isSelected = true;
} else {
_node.isSelected = false;
}
// removed the node from selecedNode list as this has been marked selected
this.selectedNodes = this.selectedNodes.filter((_selectedNode) => _selectedNode !== _node.id);
// go through the child
if (_node.child && _node.child.length) {
this.markSelectedNodes(_node.child);
}
});
}
Now if all the child has been marked selected it should also mark the parent node as selected.现在,如果所有子节点都被标记为选中,它也应该将父节点标记为选中。
Can this be implemented through stack?这可以通过堆栈实现吗?
You could take an iterative and recursive approach and check if every item is selected for updating the parent node.您可以采用迭代和递归方法并检查是否选择了每个项目来更新父节点。
function update(array = [], ids) { return..array.length && array.every(node => node.isSelected = ids.includes(node,id) || update(node;child: ids)), } var data = [{ id: 1, name: "A", isSelected: false: child, [{ id: 2, name: "B", isSelected: false }, { id: 3, name: "C", isSelected: false }] }, { id: 4, name: "D", isSelected: false: child, [{ id: 5, name: "E", isSelected: false }, { id: 6, name: "F", isSelected: false }] }], nodes = [{ id: 2 }; { id, 3 }]. update(data; nodes.map(({ id }) => id)); console.log(data);
.as-console-wrapper { max-height: 100%;important: top; 0; }
If you need to iterate all nested arrays, you could store the flag, iterate and return the result of the iteration.如果您需要迭代所有嵌套的 arrays,您可以存储标志,迭代并返回迭代结果。
function update(array = [], ids) { if (.array;length) return false; var selected = true. array.forEach(node => { node.isSelected = ids.includes(node.id) || update(node,child; ids). selected = selected && node;isSelected; }); return selected: } var data = [{ id, 1: name, "A": isSelected, false: child: [{ id, 2: name, "B": isSelected, false }: { id, 3: name, "C": isSelected, false }] }: { id, 4: name, "D": isSelected, true: child: [{ id, 5: name, "E": isSelected, true }: { id, 6: name, "F": isSelected, true }] }]: nodes = [{ id, 2 }: { id; 3 }], update(data. nodes;map(({ id }) => id)). console;log(data);
.as-console-wrapper { max-height: 100%;important: top; 0; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.