1

La función trabaja de manera correcta en el listado, como pueden ver en la columna Partes le das clic a Ver y podrán ver el resultado de la función, el problema que tengo es al darle al botón Eliminar (ubicado al final de cada fila, columna Acción), esta me repite los hijos de los padres principales, pueden observar el resultado haciendo clic el botón Eliminar.

$( document ).ready(function() {
    listar();
});

var listar = function(){
    var table = $('#table').DataTable({
        destroy: true,
        filter: false,
        processing: true,
        serverSide: true, 
        autoWidth: true,
        ajax: {
            url: 'https://api.myjson.com/bins/g0us7',
            method: 'get',
            data: function (d) {
            }
        },
        columns: [
            { data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
                    return meta.row+1;
                }
            },
            { "render": function ( data, type, row ) {
                return row[1];
            }},
            { "render": function ( data, type, row ) {
                return row[2];
            }},
            { "render": function ( data, type, row ) {
                return '<a href="#" title="Listado de Partes Afectadas" data-html="true" data-trigger="focus" data-toggle="popover-partes" data-placement="bottom" data-content="'+ listado(row[15])+'">Ver</a>';
            }},
            { "render": function ( data, type, row ) {
                return row[4];
            }},
            { "render": function ( data, type, row ) {
                return row[3];
            }},
            { "render": function ( data, type, row ) {
                return row[5];
            }},
            { "render": function ( data, type, row ) {
                return row[6] + ' / ' + segundosAtiempo(row[7]);
            }},
            { "render": function () {
                return '<button type="button" class="eliminar delete-modal btn btn-danger botonEliminar"><span class="fa fa-trash"></span><span class="hidden-xs"> Eliminar</span></button>';
            }},
        ],
        order: [[1, 'asc']],
        fnDrawCallback: function() {
            $('[data-toggle="popover-partes"]').popover();
        },
        initComplete: function (data) {
        }
    });
    eliminar("#table tbody",table);
};

var eliminar = function(tbody, table){
    $(tbody).on("click","button.eliminar", function(){
        if(table.row(this).child.isShown()){
            var data = table.row(this).data();
        }else{
            var data = table.row($(this).parents("tr")).data();
        }
        modal = eliminar_dialog(data);
        modal.open();
    });
}

function eliminar_dialog(data){

    let dialog = new BootstrapDialog({
        title: 'Eliminar',
        message: function(dialogRef){

            dialogRef.getModalContent()[0].getElementsByClassName("modal-body")[0].setAttribute('class', 'panel-body');

            var form = $('<form/>',{
                'id' : 'form_eliminar_item',
                'role'  : 'form',
                'class'  : 'form-horizontal'
            });
            let div;
            let label;
            let div_field;
            let field;

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<h3/>',{
                    'for' : '',
                    'class' : 'text-center col-sm-12 col-xs-12',
                    'text'    : '¿Desea eliminar este item?'
                });
                label.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Areas: '
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'text'    : data[1]
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Equipos: '
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'text'    : data[2]
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Partes: '
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'html'    : listado(data[15])
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Tipos de Mantenimiento: '
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'text'    : data[4]
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Mecánico: '
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'text'    : data[3]
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Observación: '
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'text'    : data[5]
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Inicio - Fin'
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'text'    : data[6]
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            div = $('<div/>',{
                'class' : 'form-group col-sm-12 col-xs-12',
            });
                label = $('<label/>',{
                    'class' : 'control-label col-sm-3 col-xs-12',
                    'text'    : 'Duración: '
                });
                label.appendTo(div);
                div_field = $('<div/>',{
                    'class' : 'col-sm-9 col-xs-12',
                });
                    field = $('<span/>',{
                        'class' : 'col-sm-10',
                        'text'    : segundosAtiempo(data[7])
                    });
                    field.appendTo(div_field);
                div_field.appendTo(div);
            div.appendTo(form);

            return form;
        },
        //cssClass: 'login-dialog',
        buttons: 
        [{
            label: 'Cerrar',
            icon: 'fa fa-remove',
            action: function(dialogRef) {
                dialogRef.close();
            }
        }],
        onshow: function(dialogRef){
        },
        onshown: function(dialogRef){
            $('#form_eliminar_item:first *:input:first').focus();
        },
        onhidden: function(dialogRef){
        }
    });
    return dialog;
};

function listado(listado_partes){
    let menujson = { "menu": listado_partes};
    function ordenar(j) {
     menu = { menu: [] };
     for (n in j.menu) {
      insertar(j.menu[n], 0, menu.menu);
     }
     return menu;
    }
    function insertar(j, l, menu) {
     for (n in menu) {
      if (menu[n].id == j.id_padre) {
       if (menu[n].menu == undefined)
        menu[n].menu = [];
       return menu[n].menu.push(j);
      } else {
       if (menu[n].menu)
        if (insertar(j, l+1, menu[n].menu))
         return true;
      }
     }
     if (l)
      return false;
     menu.push(j);
    }
    menu = ordenar(menujson);
    html=select2(menu.menu);
    function select2(menu, l) {
     if ( l == undefined)
      l=0, html="", pf="";
     let sp="&nbsp;".repeat(l*6);
     let n1="";
     for (n in menu) {
      n1=n;
      html += "<span>"+sp+menu[n].nombre+"</span><br/>";
      if (menu[n].menu) {
       select2(menu[n].menu, l+1);
      };
     };
     return html;
    }
    return html;
}

function segundosAtiempo(seconds){
    let numdays = Math.floor(seconds / 86400);
    let numhours = Math.floor((seconds % 86400) / 3600);
    let numminutes = Math.floor(((seconds % 86400) % 3600) / 60);
    let numseconds = ((seconds % 86400) % 3600) % 60;
    let result = '';
    if(numdays > 0){
        if(numdays == 1){
            result += numdays + " día ";
        }else{
            result += numdays + " dias ";
        }
    }
    if(numhours >0){
        if(numhours == 1){
            result += numhours + " hora ";
        }else{
            result += numhours + " horas ";
        }
    }
    if(numminutes >0){
        if(numminutes == 1){
            result += numminutes + " minuto ";
        }else{
            result += numminutes + " minutos ";
        }
    }
    if(numseconds >0){
        if(numseconds == 1){
            result += numseconds + " segundo ";
        }else{
            result += numseconds + " segundos ";
        }
    }
    return result;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>

<table class="display nowrap" id="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Nº</th>
            <th>Area</th>
            <th>Equipo (N° Activo - Nombre - Serial / Marca - Modelo)</th>
            <th>Partes</th>
            <th>Tipo de Mtto</th>
            <th>Mecánico (C.I. / Apellidos, Nombres)</th>
            <th>Observaciones</th>
            <th>Inicio - Fin / Duración</th>
            <th>Acción</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Nº</th>
            <th>Area</th>
            <th>Equipo (N° Activo - Nombre - Serial / Marca - Modelo)</th>
            <th>Partes</th>
            <th>Tipo de Mtto</th>
            <th>Mecánico (C.I. / Apellidos, Nombres)</th>
            <th>Observaciones</th>
            <th>Inicio - Fin / Duración</th>
            <th>Acción</th>
        </tr>
    </tfoot>
</table>

Actualización 1:

Color Rojo: Columna partes en la tabla y la columna partes reflejada en el modal.

Color Azul: subnivel o hijo que da la función recursiva.

repetición de los subniveles o hijos

3
  • Yo le doy a eliminar y no pasa nada
    – Lorthas
    el 19 jul. 2017 a las 17:55
  • ¿@Lorthas Te muestra el modal?
    – bypabloc_
    el 19 jul. 2017 a las 17:58
  • @Lorthas actualice la pregunta y adjunte una imagen demostrando donde esta mi error o lo que no deberia de suceder.
    – bypabloc_
    el 19 jul. 2017 a las 18:08

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.