es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

bootstrap-table: haz clic en una celda para cargar un modal y editar

01 Aug, 2023 Programación

Estoy usando bootstrap-table y cargo exitosamente una tabla con filtrado y paginación. Intenté agregar edición a través de x-editable pero no tuve éxito al usar las 3 cosas juntas.

El siguiente intento es hacer clic en una celda que cargue un modal con cualquier dato en esa celda, me permita editarlo y guardarlo. También necesito el valor “id” de esa fila para saber cómo guardar los datos en una base de datos mysql. Esto es lo que he intentado:

$('#myTable').on('click-cell.bs.table', function (field, value, row, $el) {
    if (value == "functionData"){
        alert($el.id + "-" + $el.functionData);
    }
});

Obtengo el valor de id de la fila y el valor de functionData, lo cual es bueno. ¿Cómo cargo una ventana de modal con estos datos? He intentado esto:

$('#myModal').hide();

$('#myTable').on('click-cell.bs.table', function (field, value, row, $el) {
    if (value == "functionData"){
        alert($el.id + "-" + $el.functionData);
        $('.modal-body').local('content.html', function() {
            $('#myModal').modal({ show: true });
        });
    }
});

Eventualmente quiero cargar los datos de la fila en la que hice clic en el modal, pero primero las cosas más importantes.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en IT especializado en PHP, jQuery y bootstrap-table, aquí tienes un enfoque para cargar una ventana modal con datos de una celda clicada:

    1. Agrega una ventana modal a tu código HTML con un div modal-body para mostrar el contenido de la celda clicada.

    2. Modifica tu función de clic en la celda jQuery click-cell.bs.table para incluir los siguientes cambios:

    $('#myTable').on('click-cell.bs.table', function (field, value, row, $el) {
  if (value == "functionData"){
    $('#modal-body').text($el.functionData);
    $('#myModal').modal({show: true});
  }
});

    En este código, recuperamos el valor functionData del elemento clicado y lo mostramos en el div modal-body. Luego, mostramos la ventana modal (previamente oculta) que contiene el cuerpo modificado.

    Esto te permite mostrar el contenido de una celda en una ventana modal, lo que hace posible editar los datos antes de guardarlos en la base de datos, así como obtener el valor ID de la fila.

Comments are closed.