Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo De Edición En Línea Editable En X Usando PHP Y MySQL

 Ya hemos compartido tutoriales sobre el complemento jQuery editable x , obtuvimos una gran respuesta y solicitud para compartir un tutorial editable x para actualizar el registro usando php y mysql.

Demostraré en este tutorial de php cómo crear edición en línea usando php y mysql. También puede crear ediciones en línea utilizando el atributo HTML5 .

La edición en línea es una característica muy importante de la aplicación web que permite al usuario actualizar sobre la marcha sin mover páginas adicionales. Hay muchos complementos de edición en línea y complementos de cuadrícula disponibles que brindan la opción de editar el valor del campo en línea. Estoy usando el complemento jQuery x-editable para hacer que el elemento html sea editable en línea.

Usaremos Los Siguientes Archivos Para La Edición En Línea Usando X-Editable

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é obtener empleado, actualizaré el método de acción de registro y devolveré la respuesta json.

x-editable-inline-edit

Cómo Crear Una Tabla HTML Dinámica Usando JSON

Paso 1: archivo de conexión creado connection.phppara 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 : nombre de usuario de la base de datos de MySQL
  3. $ contraseña : contraseña de base de datos de MySQL
  4. $ dbname : nombre de la base de datos

Paso 2: Incluyó todos los archivos js y css en el index.phparchivo.

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

Paso 4: Cree el método AJAX para obtener resultados del archivo php y anexe con el cuerpo de la tabla usando el append()método jQuery .

Como puede ver, he creado una solicitud GET tipo AJAX que se utilizará para obtener todos los registros de la tabla de empleados. Estoy agregando uno por uno el objeto de respuesta json con la tabla HTML.

Paso 5:response.php archivo creado y método de listado de empleados agregado.

Se agregó el método de cambio de php y la acción predeterminada sería obtener el registro de empleado de la tabla MySQL y devolver los objetos json.

Cómo Hacer Que La Columna De Una Tabla HTML Sea Editable

Hemos generado una tabla HTML dinámicamente usando ajax y cargado datos en ella, ahora haremos una celda de tabla HTML editable usando el método x-editable Necesitamos aplicar la opción editable en cada columna de la tabla que queremos editar en línea.

He creado el método jquery para habilitar la edición en línea en la celda de la tabla Necesitamos pasar los siguientes parámetros para cada columna de la tabla,

Donde como:

  • selector : el identificador del selector de columna del elemento, que podría ser el ID del elemento, la clase, el nombre, etc.
  • url : el script del lado del servidor que manejará la solicitud.
  • título : Úselo para definir el título del encabezado para la ventana emergente que se mostrará en la celda de edición de tiempo.

El método jQuery es:

Ahora llamaremos al método anterior para cada celda como a continuación,

Ahora modificaremos el atributo td de la tabla para la edición en línea. Necesitamos agregar algunos atributos personalizados que se utilizan para la edición en línea y enviar parámetros de solicitud al servidor en la actualización.

Los principales atributos son:

  • tipo de datos : tipo de elemento html de entrada (texto, área de texto, seleccionar, etc.)
  • data-name : el nombre de la columna de la tabla Mysql.
  • data-pk : la clave principal del registro que se actualizará (ID en db)

También puede definir todos los atributos en el elemento HTML a la vez usando la sintaxis siguiente, pero asegúrese de que el contenido sea estático o cargado en DOM.

Actualizar Registro Usando X-Editable Y Php

Hemos creado una celda html editable usando x-editable, por lo que ahora crearemos un método actualizado en el response.phparchivo que tomará los parámetros de solicitud y los datos actualizados del registro de empleados usando SQL Query.

Paso 1: hemos agregado la acción de edición en el response.phparchivo bajo el método de cambio.

Paso 2: Método agregado para actualizar el registro en la tabla MySQL del empleado.

Cuando hayamos hecho clic en la opción ok en la ventana emergente de edición en línea, enviaremos algunos parámetros al lado del servidor, que son el nombre de la columna, el valor y la identificación del registro que se utilizará para actualizar el registro.

Conclusión:

Hemos demostrado el registro de actualización en mysql usando el complemento jQuery editable x. Estamos usando Bootstrap, jQuery, PHP y MySQL en este tutorial. También puede usar cualquier lenguaje del lado del servidor de programación para la edición en línea.

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

Publicar un comentario

0 Comentarios