El mejor tutorial de jQuery EasyUI Aplicaciones - Creación de una aplicación CRUD en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,

jQuery EasyUI Aplicaciones - Creación de una aplicación CRUD

La recolección de datos y la gestión adecuada de los datos es una aplicación de red común necesario. ABM nos permite generar una lista de páginas y editar registros de base de datos. Este tutorial muestra cómo utilizar framework jQuery EasyUI para implementar un CRUD cuadrícula de datos.

Vamos a utilizar los siguientes plug-ins:

• cuadrícula de datos: muestra una lista de los datos al usuario.
• diálogo: Crear o editar una sola información del usuario.
• formulario: Formulario para la presentación de los datos.
• Messager: muestra información operativa.

Paso 1: Preparar la Base de datos

Vamos a utilizar la base de datos MySQL para almacenar la información del usuario. Creación de una base de datos y la tabla 'usuarios'.

Paso 2: Crear una cuadrícula de datos para mostrar la información del usuario

Creado sin javascript cuadrícula de datos de código.

<Tabla id = "dg" title = class = estilo "easyui-cuadrícula de datos" "Mis Usuarios" = "width: 550px; altura: 250px"
		url = "get_users.php"
		Barra de herramientas = "# barra de herramientas"
		rownumbers = "true" fitColumns = "true" singleSelect = "true">
	<Culata en T>
		<Tr>
			<Th Campo = "nombre" width = "50"> Nombre </ th>
			<Campo Th = anchura "apellido" = "50"> Apellidos </ th>
			<Campo Th = "teléfono" width = "50"> Teléfono </ th>
			<= Th campo "e-mail" width = "50"> correo electrónico </ th>
		</ Tr>
	</ Culata en T>
</ Table>
<Div id = "barra de herramientas">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()"> nuevo </a> usuario
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"> Editar usuario </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()"> Eliminar usuario </a>
</ Div>

No necesitamos que escribir ningún código JavaScript que se pueden mostrar a la lista de usuarios, como se muestra a continuación:

Cuadrícula de datos mediante la propiedad 'url' y asignado el 'get_users.php', que se utiliza para recuperar los datos desde el servidor.

archivo de código get_users.php

$ Rs = mysql_query ( "SELECT * FROM usuarios ');
$ Resultado = array ();
while ($ fila = mysql_fetch_object ($ rs)) {
	array_push ($ resultado, $ fila);
}

json_encode echo ($ resultado);

Paso 3: Crear cuadro de diálogo Form

Usamos el mismo cuadro de diálogo para crear o editar un usuario.

<Id = class = estilo "DLG" Div "-easyui de diálogo" = "width: 400px; altura: 280px; padding: 10px 20px"
		Cerrado = botones "verdaderos" = "DLG-botones #">
	<Div class = "ftitle"> Información para el usuario </ div>
	<Form id = método de "FM" = "post">
		<Div class = "FITEM">
			<Label> Nombre: </ label>
			<Input name = clase "nombre" = "easyui-validatebox" requerido = "true">
		</ Div>
		<Div class = "FITEM">
			<Label> Apellido: </ label>
			<Input name = clase "apellido" = "easyui-validatebox" requerido = "true">
		</ Div>
		<Div class = "FITEM">
			<Label> Teléfono: </ label>
			<Input name = "teléfono">
		</ Div>
		<Div class = "FITEM">
			<Label> e-mail: </ label>
			<Input name = "email" class = "easyui-validatebox" validType = "email">
		</ Div>
	</ Form>
</ Div>
<id = "DLG-botones" div>
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()"> Guardar </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> Cancelar </a>
</ Div>

Este diálogo ha sido creado, ni ningún código javascript:

Paso 4: Crear y lograr edición de usuarios

Al crear un usuario abre un cuadro de diálogo y borrar los datos del formulario.

NewUser funcionar () {
	$ ( '# Dlg') de diálogo ( "abierta") de diálogo ( 'setTitle', 'Nuevo Usuario') es;
	. $ ( '# Fm') forma ( "claro");
	url = 'save_user.php';
}

Durante la edición de un usuario, un cuadro de diálogo se abre y carga los datos del formulario de la fila seleccionada en la cuadrícula de datos.

var fila = $ ( '# dg') cuadrícula de datos ( 'GetSelected') .;
si (fila) {
	$ ( '# Dlg') de diálogo ( "abierta") de diálogo ( 'setTitle', 'Editar usuario') es;
	. $ ( '# Fm') forma ( "carga", fila);
	url = "id = update_user.php? '+ row.id;
}

formulario de devolución 'url' cuando se almacena los datos de usuario se guarda la dirección URL.

Paso 5: guardar los datos de usuario

Usamos el siguiente código para guardar los datos de usuario:

saveUser función () {
	$ ( '# Fm'). Forma ( 'submit', {
		url: url,
		onSubmit: function () {
			devolver $ (this) .Form ( "validar");
		},
		el éxito: la función (resultado) {
			var result = eval ( '(' + resultado + ')');
			si (result.errorMsg) {
				$ .messager.show ({
					Título: "Error",
					msg: result.errorMsg
				});
			} Else {
				$ ( '# Dlg') de diálogo ( "cerca") ;. // Cerrar el cuadro de diálogo
				$ ( '# Dg') cuadrícula de datos ( 'recarga') ;. // Actualizar los datos de usuario
			}
		}
	});
}

Antes de enviar el formulario, la función 'onSubmit' se llama, la función se utiliza para verificar los valores de campo de formulario. Cuando los valores de los campos del formulario enviado con éxito, cerrar el diálogo y volver a cargar los datos de DataGrid.

Paso 6: Eliminar un usuario

Utilizamos el código siguiente para eliminar un usuario:

destroyUser función () {
	var fila = $ ( '# dg') cuadrícula de datos ( 'GetSelected') .;
	si (fila) {
		$ .messager.confirm ( 'Confirmar', '¿Está seguro que desea destruir a este usuario?', Function (r) {
			si (r) {
				$ .post ( 'Destroy_user.php', {id: row.id}, la función (resultado) {
					si (result.success) {
						$ ( '# Dg') cuadrícula de datos ( 'recarga') ;. // Actualizar los datos de usuario
					} Else {
						$ .messager.show // Mostrar mensaje de error ({
							Título: "Error",
							msg: result.errorMsg
						});
					}
				}, 'JSON');
			}
		});
	}
}

Antes de extraer una fila, vamos a mostrar un cuadro de diálogo de confirmación que permite al usuario decidir si desea eliminar efectivamente las filas de datos. Después de los datos se ha eliminado correctamente, llame al método 'recarga' para actualizar los datos de DataGrid.

Paso 7: Ejecutar código

Abierto MySQL, ejecuta el código en el navegador.

Descargar ejemplos de jQuery EasyUI

jeasyui-app-crud1.zip