0
我在使用角树组件(https://angular2-tree.readme.io)的Angular2应用程序中显示树。从树中删除选定的节点
我需要让用户能够选择树中的任何节点并删除它。这应该删除所选节点及其所有子节点(如果它是叶节点,那么只是节点)。用户完成后,剪枝树将被发送到服务器并保存在那里。
在以下示例中,用户选择“节点1-2”并单击“删除”。这将从视图和底层Javascript对象中删除'节点1-2','节点1'和'节点2'。然后用户可以单击另一个按钮(比如说保存)将更新的对象保存在服务器上。
为了做到这一点,我写了下面的代码被称为删除按钮的点击。我存储选定节点的ID,然后遍历整个树来查找该ID。当id匹配时,我使用'delete'关键字来删除'id'和'text'。但是,“删除孩子”不起作用。
deleteSelectedNode() {
//Get the node which was selected by the user
let nodeToDelete: TreeNode = this.myService.getActiveNode();
//id will be unique, can be used to identify the node
let idToDelete = nodeToDelete.data.id;
this.traverseTree(this.nodes[0], idToDelete);
}
traverseTree(obj, idToDelete: string) {
for (var k in obj) {
if (typeof obj[k] == "object" && obj[k] !== null) {
this.traverseTree(obj[k], idToDelete);
}
else {
if (k === 'id') {
let id = obj[k];
if (id === idToDelete) {
console.log('ID Matched ' + id);
delete obj['id'];
delete obj['text'];
delete obj['children'];
break;
}
}
}
}
}
下面是渲染树的JSON。
{
"children": [
{
"children": [
{
"text": "Node 1",
"id": "A493"
},
{
"text": "Node 2",
"id": "A494"
}
],
"text": "Node 1-2",
"id": "A491"
},
{
"children": [
{
"children": [
{
"text": "Node 3",
"id": "A5ab"
},
{
"text": "Node 4",
"id": "A5ac"
},
{
"text": "Node 5",
"id": "A5ad"
},
{
"text": "Node 6",
"id": "A5ae"
},
{
"text": "Node 7",
"id": "A5af"
},
{
"text": "Node 8",
"id": "A5b0"
},
{
"text": "Node 9",
"id": "A5b1"
},
{
"text": "Node 10",
"id": "A5b2"
},
{
"text": "Node 11",
"id": "A5b3"
},
{
"text": "Node 12",
"id": "A5b4"
},
{
"text": "Node 13",
"id": "A6da"
},
{
"text": "Node 14",
"id": "A6db"
}
],
"text": "Node 1-14",
"id": "A495"
},
{
"children": [
{
"text": "Node 15",
"id": "A6dc"
},
{
"text": "Node 16",
"id": "A6dd"
},
{
"text": "Node 17",
"id": "A6de"
},
{
"text": "Node 18",
"id": "A6df"
},
{
"text": "Node 19",
"id": "A6e0"
},
{
"text": "Node 20",
"id": "A6e1"
},
{
"text": "Node 21",
"id": "A6e2"
},
{
"text": "Node 22",
"id": "A6e3"
}
],
"text": "Node 15-22",
"id": "A496"
},
{
"text": "Node 23",
"id": "A497"
},
{
"text": "Node 24",
"id": "A498"
}
],
"text": "Node 23-24",
"id": "A492"
}
],
"text": "Node 1-24",
"id": "A490"
}
如何删除完整的节点,包括子节点?另外,有没有更好的方法来实现这一目标?