0

Buenas estoy teniendo problemas para terminar una función recursiva para borrar los nodos hijos de cada uno de los arboles, empece una función para borrarlos, funciona perfecto cuando tenes que borrar un nodo que no tiene hijos y también cuando tiene 1 solo hijo, pero cuando tiene más empieza a borrar otros nodos de otros arboles, adjunto el código para ver si alguno encuentra el error en mi funcion el error. Buenas estoy teniendo problemas para terminar una función recursiva para borrar los nodos hijos de cada uno de los arboles, empece una función para borrarlos, funciona perfecto cuando tenes que borrar un nodo que no tiene hijos y también cuando tiene 1 solo hijo, pero cuando tiene más empieza a borrar otros nodos de otros arboles, adjunto el código para ver si alguno encuentra el error en mi funcion el error.

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>

1 respuesta 1

0

Trabaja sobre el objeto nodos, no necesitas pasar una lista como parámetro, de hecho, no revisé todo tu código para ver cómo armas esa lista.

Un error que tienes es que intentas obtener el índice del elemento usando .map() y .filter(), que no devuelven lo que realmente quieres. Para este caso, es el método .findIndex() el que va a devolver el valor adecuado.

Finalmente, la lógica debería ser:

  1. Verificar que el nodo existe, .findIndex() devolverá un número entre cero y (longitud del arreglo - 1); si no existe, devolverá -1
  2. Todavía no es conveniente eliminar el nodo seleccionado, podría perderse la referencia para encontrar los hijos o, si algo falla, quedarían nodos huérfanos
  3. Buscar los hijos, la propiedad padre es igual a ID de nodo actual, .filter() devuelve un arreglo con los elementos que cumplen la condición, o un arreglo vacío
  4. Recorrer los hijos para eliminarlos de forma recursiva
  5. Ya se puede eliminar el nodo seleccionado

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
                },
            ]
        }
        
// funcion para borrar un nodo
// agregué "function" para poderlo hacer un ejemplo verificable
function borrarNodo(idnodo) {
    // Buscar nodo
    let indexBorrar = this.nodos.Dato.findIndex(item => item.id_nodo === idnodo);
    if(indexBorrar >= 0) {
        // El nodo existe, hay que proceder a borrar
        
        // Primero se buscan los hijos, item.padre = id de nodo actual
        let hijos = this.nodos.Dato.filter(item => item.padre == idnodo);
        // Recorrer y ejecutar recursivamente
        hijos.forEach(hijo => this.borrarNodo(hijo.id_nodo));

        // Ya se borraron los hijos (si había), se puede borrar el nodo
        this.nodos.Dato.splice(indexBorrar, 1);
    }
}

// Borrar nodo 2 y sus hijos
borrarNodo(2);
console.log(this.nodos);

Importante: Como la función se ejecuta recursivamente, debes manejar las alertas por fuera, de lo contrario, se estarían disparando en cada llamada a la función.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.