function 用於刪除樹的節點

Question

好，我正在使用primeng制作一棵樹，我正在執行能夠從樹中刪除一個節點的功能，我已經制作了這個function，當我想刪除一個沒有子節點的節點時效果很好，也當它只有一個孩子，但我在刪除一個有多個孩子的節點時會出現問題。 我認為問題出在 function 的問題上，但我不太清楚它可能是

 this.nodos = { Estado: true, //Booleano Respuesta: 'ok', //string Dato: [ { id_nodo: 1, //int padre: undefined, //undefined o int funcion: 'funcion 1', //String (nombre de la función) menu: 'menu', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, id_funcion: 1, //int orden: 1,//int principal: true //booleano que identifica si el nodo es principal o no }, { id_nodo: 2, //int padre: 1, //undefined o int funcion: 'funcion 2', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 2', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 2, //int orden: 2, //int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 3, //int padre: 1, //undefined o int funcion: 'funcion 3', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 3', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 3, //int orden: 3,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 4, //int padre: 1, //undefined o int funcion: 'funcion 4', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 4', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 4, //int orden: 4,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 5, //int padre: 3, //undefined o int funcion: 'funcion 5', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 5', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 5, //int orden: 5,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 6, //int padre: 2, //undefined o int funcion: 'funcion 6', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 6', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 6, //int orden: 6,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 7, //int padre: 3, //undefined o int funcion: 'funcion 7', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 7', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 7, //int orden: 7,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 8, //int padre: undefined, //undefined o int funcion: 'funcion 8', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 8', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 8, //int orden: 8,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 9, //int padre: 8, //undefined o int funcion: 'funcion 9', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 9', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 9, //int orden: 9,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 10, //int padre: undefined, //undefined o int funcion: 'funcion 10', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 10', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 10, //int orden: 10,//int principal: false //booleano que identifica si el nodo es principal o no }, { id_nodo: 11, //int padre: 10, //undefined o int funcion: 'funcion 11', //String (nombre de la función) lo que hay que mostrar en los recuadros menu: 'menu 11', //String (titulo de la funcion) permitidos: { pasar_a_manual: true, cancelar: false, estado_servicio: true }, //array de booleanos id_funcion: 11, //int orden: 11,//int principal: false //booleano que identifica si el nodo es principal o no }, ] } //Cartel Sweet Alert Error mostrarCartelError(titulo, contenido) { Swal({ title: '<b style="color:#000;">' + titulo + '</b>', html: '<b style="color:#000;">' + contenido + '</b>', type: 'error', confirmButtonText: 'Aceptar', background: 'rgb(0, 120, 106)', confirmButtonColor: '#78cbf2', timer: 10000 }) } //Cartel Sweet Alert Correcto mostrarCartelBien(titulo, contenido) { Swal({ title: '<b style="color:#000;">' + titulo + '</b>', html: '<b style="color:#000;">' + contenido + '</b>', type: 'success', confirmButtonText: 'Aceptar', background: 'rgb(0, 120, 106)', confirmButtonColor: '#78cbf2', timer: 10000 }) } //Variables para la funcion del nodo seleccionado label: any dataname: any; padre: any //Funcion si se selecciona un nodo onNodeSelect(event) { var label = event.node.data.id_nodo var dataname = event.node.data.name var padre = event.node.data.padre //muestro los datos del arbol en la tabla this.label = label this.dataname = dataname this.padre = padre } // funcion para borrar un nodo borrarNodo(lista,idnodo) { //this.mostrarCartelBien("Correcto", "nodo borrado con éxito") //indice del nodo a borrar let indice_nodo_borrar = lista.map((_, i) => i).filter(e => lista[e].id_nodo === idnodo); //indices de los nodos hijos a borrar let indice_nodo_borrar_hijos = lista.map((_, i) => i).filter(e => lista[e].padre === idnodo); //indice parseado a int del indice del nodo a borrar let indice_nodo_borrar_parseado = parseInt(indice_nodo_borrar) //Si tiene hijos le aviso al usuario que se van a borrar los hijos del nodo seleccionado if(indice_nodo_borrar_hijos.length > 0){ Swal({ title: '<b style="color:#000;">Atención</b>', html: '<h5 style="color:#000;">Si borra este nodo también borrara su hijos ¿Desea Continuar?</h5>', type: 'warning', showCancelButton: true, confirmButtonText: 'Si, borrar', background: 'rgb(0, 120, 106)', confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', cancelButtonText: 'Cancelar', }).then((result) => { if(result.value){ for (let i = 0; i < indice_nodo_borrar_hijos.length; i++) { //Borro el nodo this.nodos.Dato.splice(indice_nodo_borrar_parseado,1) //Borro los hijos del nodo this.nodos.Dato.splice(indice_nodo_borrar_hijos[i],1) //Actualizo el árbol this.armarArbol(this.nodos.Dato) } } }) //Si no tiene hijos solo borro el nodo seleccionado } else{ Swal({ title: '<b style="color:#000;">Atención</b>', html: '<h5 style="color:#000;">¿Seguro que quiere borrar este nodo?</h5>', type: 'warning', showCancelButton: true, confirmButtonText: 'Si, borrar', background: 'rgb(0, 120, 106)', confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', cancelButtonText: 'Cancelar', }).then((result) => { if(result.value){ console.log("no tiene hijos") this.nodos.Dato.splice(indice_nodo_borrar_parseado,1) this.armarArbol(this.nodos.Dato) } }) } }

 //Boton editar tag.btn-editar{ background-color:#00786a; } //boton nuevo tag.btn-nuevotag{ color: #00786a; font: 120% Roboto; font-weight: 500; border: transparent; background-color: transparent; }.titulo-tipo-tag{ font: 140% Roboto; font-weight: 500; }.titulo-mensajes{ color: #414141; font: 22px Roboto; font-weight: 500; width: 163px; } //item barra /*.item-barra{ font: 120% Roboto; }*/ //Estilos arbol.company.ui-organizationchart.ui-organizationchart-node-content.ui-person { padding: 0; border: 0 none; }.node-header,.node-content { padding: .5em.7em; }.node-header { background-color: #495ebb; color: #ffffff; }.node-content { text-align: center; border: 1px solid #404e91; }.node-content img { border-radius: 50%; }.department-cfo { background-color: #00786a; color: #ffffff; border-radius: 20px; text-transform: uppercase; font-weight: bolder; }.department-coo { background-color: #a534b6;important: color; #ffffff. }:department-cto { background-color; #e9286f:important; color. #ffffff. }:ui-person;ui-node-toggler { color. #495ebb.important: };department-cto.ui-node-toggler { color: #8a0a39;important: };node-parent{ background-color: #e9286f;important. color: #ffffff; border: 1px solid #000; } .boton{ cursor: pointer; }

 <mat-tab label="Árbol"> <div class="col-md-12 d-flex"> <;-- Grafico de Arbol--> <div class="col-md-8 mt-4"> <mat-tab-group > <mat-tab *ngFor="let lista of lista_arboles. let indice = index" label="{{indice}}"> <div class="mt-3 pt-3"> <p-organizationChart [value]="lista" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)" (onNodeUnselect)="onNodeUnSelect($event)" styleClass="company"> <ng-template let-node pTemplate="person"> <div class="node-header ui-corner-top">{{node.label}}</div> <div class="node-content"> <div>{{ node.data.name }}</div> </div> </ng-template> <ng-template let-node pTemplate="department"> {{ node:label }} </ng-template> </p-organizationChart> </div> </mat-tab> </mat-tab-group> </div> <;-- Fin Graficos de arbol dinamicos --> <?-- Tabla dinamica de nodos --> <div class="col-md-4 mt-4"> <table class="table table-striped"> <thead class="text-white" style="background-color: #00786a."> <tr align="center"> <th class="font-weight-bolder" colspan="4">Nodo Seleccionado</th> </tr> </thead> <thead> <tr> <th>Id Nodo</th> <th>Funcion</th> <th>Nodo Padre</th> <th>Acciones</th> </tr> </thead> <tbody> <tr> <td ngDefaultControl name="label" [(ngModel)]="label" [innerHTML]="label"></td> <td ngDefaultControl name="dataname" [(ngModel)]="dataname" [innerHTML]="dataname"></td> <td ngDefaultControl name="padre" [(ngModel)]="padre" [innerHTML]="padre"></td> <td> <div class="row"> <button class="btn btn-sm" type="button" data-toggle="tooltip" data-placement="top" title="Agregar Nodo" (click)=".label. abrirModalAgregarNodo(modal_nuevo_nodo). abrirModalAgregarNodoHijo(modal_nuevo_nodo_hijo) "> <img src="../assets/images/btn_nuevo_usuario.png" /> </button> <button class="btn btn-sm" type="button" data-toggle="tooltip" data-placement="top" title="Editar nodo" [disabled]=",label" (click)="abrirModalEditarNodo(modal_editar_nodo)"> <img src="../assets/images/btn_editar.png" alt="Editar nodo" /> </button> <button class="btn btn-sm" type="button" data-toggle="tooltip" data-placement="top"title="Borrar nodo" [disabled]=":label" (click)="borrarNodo(nodos;Dato:label)"> <img src=";:/assets/images/ic_trash;png" height="24px" alt="Borrar nodo" /> </button> </div> </td> </tr> </tbody> </table> <table style="margin-top. 50px." class="table table-striped"> <thead class="text-white" style="background-color; #00786a;"> <tr style="font-weight. bolder."> <th>Id Nodo</th> <th>Funcion</th> <th>Nodo Padre</th> </tr> </thead> <tbody> <tr *ngFor="let tree of this.nodos.Dato; let index = index;"> <th title="Id nodo" scope="row">{{ tree.id_nodo }}</th> <td title="Nombre la función del nodo">{{ tree.funcion }}</td> <td title="Nodo padre">{{ tree.padre }}</td> </tr> </tbody> </table> </div> <!-- Fin tabla dinamica de nodos --> </div> </mat-tab> </mat-tab-group>

Answer 1

我在下面提供了一個解決方案。 在這個例子中，我刪除id_nodo 1 。 但這適用於任何節點 ID。

1. toDeleteList將保存要刪除的id_nodo
2. 將基礎id推送到列表中
3. 過濾所有基id的直接子代的數據並返回它們的id
4. 將這些添加到列表中
5. 對於每個直接子，調用這個 function 重復這個過程
6. 掃描整個樹的子節點后，過濾data數組以刪除toDeleteList中的任何內容
7. 返回過濾后的列表，保持原始數組不變

 const data=[{id_nodo:1,padre:null},{id_nodo:2,padre:1},{id_nodo:3,padre:1},{id_nodo:4,padre:1},{id_nodo:5,padre:3},{id_nodo:6,padre:2},{id_nodo:7,padre:3},{id_nodo:8,padre:null},{id_nodo:9,padre:8},{id_nodo:10,padre:null},{id_nodo:11,padre:10}]; let toDeleteList = []; function deleteNode(id){ toDeleteList.push(id); data.filter(d =>d.padre === id).forEach(child=>{ toDeleteList.push(child.id_nodo); deleteNode(child.id_nodo); }); return data.filter(d=>.toDeleteList.includes(d;id_nodo)); } const result = deleteNode(1). console;log(result);