Aplicación jQuery EasyUI -Crear una aplicación CRUD
La recopilación de datos y la gestión adecuada de los mismos son una necesidad común en las aplicaciones web. CRUD nos permite generar listados de páginas y editar registros de la base de datos. Este tutorial te mostrará cómo usar el framework jQuery EasyUI para implementar un DataGrid CRUD.
Usaremos los siguientes plugins:
- datagrid: muestra los datos de la lista al usuario.
- dialog: crea o edita la información de un único usuario.
- form: se utiliza para enviar datos del formulario.
- messager: muestra algunos mensajes de operación.
Paso 1: Preparar la base de datos
Usaremos la base de datos MySql para almacenar la información de los usuarios. Crear la base de datos y la tabla 'users'.
Paso 2: Crear un DataGrid para mostrar la información de los usuarios
Crear el DataGrid sin código javascript.
<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" url="get_users.php" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="firstname" width="50">First Name</th> <th field="lastname" width="50">Last Name</th> <th field="phone" width="50">Phone</th> <th field="email" width="50">Email</th> </tr> </thead> </table> <div id="toolbar"> <a href="../index.html" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a> <a href="../index.html" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="../index.html" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a> </div>
No necesitamos escribir ningún código javascript para mostrar la lista al usuario, como se muestra en la siguiente imagen:
El DataGrid utiliza la propiedad 'url' y se le asigna el valor 'get_users.php', para recuperar los datos del servidor.
El código del archivo get_users.php
$rs = mysql_query('select * from users');
$result = array();
while($row = mysql_fetch_object($rs)){
array_push($result, $row);
}
echo json_encode($result);
Paso 3: Crear el cuadro de diálogo del formulario
Usamos el mismo cuadro de diálogo para crear o editar usuarios.
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post">
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="../index.html" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
Este cuadro de diálogo ya está creado y tampoco tiene ningún código javascript.
Paso 4: Implementar la creación y edición de usuarios
Al crear un usuario, se abre un cuadro de diálogo y se vacían los datos del formulario.
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
Al editar un usuario, se abre un cuadro de diálogo y se cargan los datos del formulario desde la fila seleccionada del datagrid.
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
'url' almacena la dirección URL de devolución del formulario al guardar los datos del usuario.
Paso 5: Guardar los datos del usuario
Usamos el siguiente código para guardar los datos del usuario:
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
Antes de enviar el formulario, se llamará a la función 'onSubmit', que se utiliza para validar los valores de los campos del formulario. Cuando los valores de los campos del formulario se envían correctamente, se cierra el cuadro de diálogo y se recargan los datos del datagrid.
Paso 6: Eliminar un usuario
Usamos el siguiente código para eliminar un usuario:
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
Antes de eliminar una fila, mostraremos un cuadro de diálogo de confirmación para que el usuario decida si realmente desea eliminar los datos de esa fila. Cuando los datos se eliminan correctamente, se llama al método 'reload' para actualizar los datos del datagrid.
Paso 7: Ejecutar el código
Inicia MySQL y ejecuta el código en el navegador.
Descargar ejemplos de jQuery EasyUI
jeasyui-app-crud1.zip
Otras extensiones