El mejor tutorial de aplicación de jQuery EasyUI - crear cuadrícula de datos CRUD en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,
En la sección anterior, se utilizan los componentes de diálogo (diálogo) para crear una aplicación CRUD para crear y editar la información de usuario. Este tutorial le mostrará cómo crear una cuadrícula de datos CRUD (DataGrid). Vamos a utilizar cuadrícula de datos editable (DataGrid) plug-in para completar estas acciones las operaciones CRUD.
<Tabla id = "dg" title = estilo "Mis Usuarios" = "width: 550px; altura: 250px" Barra de herramientas = "# barra de herramientas de" campo ID = "id" rownumbers = "true" fitColumns = "true" singleSelect = "true"> <Culata en T> <Tr> <Th Campo = "nombre" width = editor de "50" = "{type: 'validatebox', las opciones: {required: true}}"> Nombre </ th> <= Th campo "Apellido" width = editor de "50" = "{type: 'validatebox', las opciones: {required: true}}"> Apellidos </ th> <= Th campo "teléfono" width = editor de "50" = "text"> Teléfono </ th> <= Th campo "e-mail" width = editor de "50" = "{type: 'validatebox', las opciones: {validType: 'correo electrónico'}}"> 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="javascript:$('#dg').edatagrid('addRow')"> Nueva </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')"> Destruye </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')"> Guardar </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')"> Cancelar </ a> </ Div>
$ ( '# Dg'). Edatagrid ({ url: 'get_users.php', saveUrl: 'save_user.php', updateURL: 'update_user.php', destroyUrl: 'destroy_user.php' });
Debemos ofrecer 'url', 'saveUrl', 'updateURL' y el atributo 'destroyUrl' para editar la cuadrícula de datos (DataGrid):
Guardar un nuevo usuario (save_user.php):
$ Nombre = $ _REQUEST [ 'apellido']; Apellido $ = $ _REQUEST [ 'apellido']; Teléfono $ = $ _REQUEST [ 'teléfono']; $ Email = $ _REQUEST [ 'email']; incluir 'conn.php'; $ Sql = "insertar en los usuarios (nombre, apellido, teléfono, correo electrónico) valores ( '$ firstname', '$ lastname', '$ telefónicas', '$ email')"; @mysql_query ($ sql); json_encode eco (array ( 'Id' => mysql_insert_id (), 'Nombre' => $ apellido, 'Apellido' => $ apellido, 'Teléfono' => $ teléfono, 'Correo' => $ correo electrónico ));
Actualizar un usuario ya existe (update_user.php):
$ Id = intval ($ _ REQUEST [ 'id']); $ Nombre = $ _REQUEST [ 'apellido']; Apellido $ = $ _REQUEST [ 'apellido']; Teléfono $ = $ _REQUEST [ 'teléfono']; $ Email = $ _REQUEST [ 'email']; incluir 'conn.php'; $ Sql = "Los usuarios de actualización del conjunto firstname = '$ Nombre', '= lastname $ apellido', teléfono = '$ teléfono, email =' $ email 'donde id = $ id"; @mysql_query ($ sql); json_encode eco (array ( 'Id' => $ id, 'Nombre' => $ apellido, 'Apellido' => $ apellido, 'Teléfono' => $ teléfono, 'Correo' => $ correo electrónico ));
Para eliminar un usuario ya existe (destroy_user.php):
$ Id = intval ($ _ REQUEST [ 'id']); incluir 'conn.php'; $ Sql = "Borrar de usuarios donde id = $ id"; @mysql_query ($ sql); json_encode eco (array ( 'éxito' => true));