Header Ads Widget

Ticker

6/recent/ticker-posts

Agregar, Editar Y Eliminar Registros Usando Bootgrid, PHP Y MySQL

 jQuery Bootgrid es un complemento de cuadrícula muy popular y está especialmente diseñado para bootstrap. Este tutorial ayuda a agregar .edit y eliminar registros usando php y mysql. Estoy usando tecnología AJAX para agregar, editar y eliminar registros con mysql. Bootgrid es un complemento de cuadrícula jQuery muy rico que se utiliza para convertir una tabla HTML simple en una cuadrícula con funciones poderosas como clasificación, paginación, búsqueda, agregar registro, editar registro y eliminar la funcionalidad de registro. Cubriremos las características enumeradas a continuación usando PHP, MySQL y ajax. Hice muchas búsquedas en Google pero no encontré ningún ejemplo que tenga las características siguientes,

  • Listado de bootgrid usando Ajax
  • Lista de bootgrid con búsqueda del lado del servidor usando Ajax
  • Habilitar la paginación ajax
  • Habilitar clasificación
  • Habilitar el botón de comando con la función de materia
  • Habilitar la paginación dinámica del lado del servidor
  • Agregue registros usando bootstrap ModalBox y ajax
  • Edite registros usando bootstrap ModalBox y ajax
  • Eliminar registros usando bootstrap ModalBox y ajax

Puede vincular datos en bootgrid, o usa la forma del lado del servidor (por ejemplo, un servicio REST) ​​para consultar una fuente de datos dinámica como una base de datos o usa la forma del lado del cliente para datos simples en memoria.

La biblioteca dependiente de jQuery Bootgrid es jquery y bootstrap. Aprenderemos cómo agregar, editar y eliminar registros en bootgrid usando php, mysql y ajax.

Agregue, Edite Y Elimine Registros Usando Bootgrid, PHP Y MySQL

Estoy Usando Los Siguientes Archivos Y Carpetas

Carpeta dist: esta carpeta contendrá todas las librerías css y js de jquery, bootstrap y bootgrid.
Carpeta de fuentes: esta carpeta contendrá todos los archivos relacionados con las fuentes.
index.php: este archivo se utilizará para crear un diseño HTML y manejar la respuesta ajax.
connection.php: este archivo se utilizará para crear una conexión a la base de datos.
response.php: este archivo se utilizará para manejar todas las funciones del lado del servidor. Crearé agregar, editar, eliminar métodos de acción y devolver la respuesta json al método ajax.

bootgrid-serveride

Consulte también otros tutoriales de grid,

  • Bootgrid de ejemplo simple (lado del servidor) con PHP, MySQL y Ajax
  • Cómo agregar, editar y eliminar una fila en jQuery Flexigrid usando PHP y MySQL

Cómo Agregar Una Lista En Bootgrid

Paso 1: archivo de conexión creado para manejar la conexión de la base de datos y devolver el objeto de conexión de la base de datos.

Dónde está:

  1. $ servername: su nombre de host mysql db
  2. $ username: mysql db username
  3. $ contraseña: mysql db pass
  4. $ dbname: nombre de la base de datos

Paso 2: Incluir todos los archivos jscssen el index.phparchivo.

Paso 3: Cree una tabla HTML para enumerar los datos en el index.phparchivo.

Aquí hemos agregado un 'Add record'botón que se utilizará para crear un nuevo registro y una tabla para enumerar los registros.

Paso 4: Método de construcción Bootgrid aplicado en la tabla HTML. El método Bootgrid convierte la tabla HTML en una hermosa lista de cuadrículas.

Se agregó el código jquery anterior al pie de página del index.phparchivo.

Paso 5: controlador de acción agregado en el response.phparchivo.

Cómo Agregar Registro De Inserción En Bootgrid

Paso 1: Se agregó Bootstrap agregar cuadro modal para agregar registro en el index.phparchivo.

Paso 2: Se agregó el método de devolución de llamada en el 'add record'botón para abrir el cuadro modal Agregar.

Paso 3: evento agregado en el botón de envío para agregar valores de entrada modales.

Paso 4:ajaxAction() Método agregado que activará la solicitud ajax al lado del servidor. Pasaremos los datos json al lado del servidor utilizando tecnología ajax.

Paso 6: se agregó una opción de cambio en el response.phparchivo.

Paso 7: Se agregó el método de agregar acción en el response.phparchivo que insertará el registro en la base de datos mysql y enviará el estado.

Cómo Agregar Editar Registro En Bootgrid

Paso 1: Se agregó el cuadro modal de edición Bootstrap para actualizar el registro en el index.phparchivo.

Paso 2: Se agregó el método de devolución de llamada en el evento del contsructor Bootgrid,

Estamos recopilando todos los datos de la fila en la que se hizo clic que desea editar y muestra el valor en el cuadro modal.

Paso 3: Se agregó un evento de clic en el botón Enviar para editar los valores de entrada modales.

Paso 4: se agregó una opción de cambio en el response.phparchivo.

Paso 5: Se agregó el método de agregar acción en el response.phparchivo que actualizará el registro en la base de datos mysql y enviará el estado.

Cómo Agregar Eliminar Registro En Bootgrid

Debe seleccionar la fila en Bootgrid y luego hacer clic en el icono del botón de eliminar registro. Cada fila de bootgrid tiene el icono de edición y eliminación de fila y la acción vinculada en ellos.

Paso 1: Se agregó el método de devolución de llamada de eliminación en el constructor de bootgrid,

Paso 2: se agregó una opción de cambio en el response.phparchivo.

Paso 3: Se agregó el método de agregar acción en el response.phparchivo que insertará el registro en la base de datos mysql y enviará el estado.

Puede descargar el código fuente y la demostración desde el siguiente enlace.

Cómo Utilizar El Código Fuente Descargado


Conclusión:

En el tutorial anterior , hemos aprendido la lista de bootgrid con PHP, MySQL y AJAX. Estos tutoriales ayudan a agregar la funcionalidad crud con bootgrid usando ajax. He demostrado cómo agregar, editar y eliminar filas usando php, mysql y ajax.

Publicar un comentario

0 Comentarios