CRUD sencillo con DevExtreme

La gestión de datos es una de las tareas más recurrentes en el mundo del desarrollo. En la mayoría de apliaciones , nos encontramos con la necesidad de crear, leer, actualizar y eliminar datos, lo que comúnmente se conoce como CRUD. En este artículo, vamos a adentrarnos en cómo poner en marcha un CRUD de forma sencilla utilizando DevExtreme , una librería  que facilita la visualización y manipulación de datos en aplicaciones web.

¿Qué es DevExtreme ?

DevExtreme es una libreria que ofrece una amplia gama de widgets y componentes para crear interfaces de usuario dinámicas y amigables. Entre sus componentes más destacados se encuentra el DataGrid, una herramienta que permite mostrar grandes cantidades de datos de forma eficiente, además de ofrecer funciones de edición, filtrado y ordenación.

Preparando el entorno

Antes de comenzar, es importante asegurarnos de tener configurado nuestro entorno de desarrollo. Esto implica contar con una estructura básica y la inclusión de las bibliotecas necesarias de DevExtreme, así como otras dependencias como jQuery y Bootstrap.

Además, en el proyecto que nos ocupa, tenemos un fichero JSON sencillo que hemos creado directamente en un documento de texto, sin pasar por la carga desde una API, para simplificar el ejemplo.

Al lio

Una vez que nuestro entorno está configurado, podemos proceder a crear nuestro DataGrid. En el código proporcionado, hemos creado un contenedor `<div>` con el id «gridContainer», donde se mostrará nuestro DataGrid. Utilizando jQuery, cargamos los datos desde un archivo JSON local y configuramos las columnas del DataGrid para que muestren la información correspondiente.

// Código anterior
 // Cargar datos desde el archivo JSON local
            $.getJSON('data.json', function(data) {
                var grid = $('#gridContainer').dxDataGrid({
                    dataSource: data,                    
                    columns: [						
                        { dataField: 'nombre', caption: 'Nombre' },
                        { dataField: 'apellidos', caption: 'Apellidos' },
                        { dataField: 'email', caption: 'Email' },
                        { dataField: 'telefono', caption: 'Teléfono' }
                    ],

// Otro código

Llamamos al DataGrid en la parte de nuestra aplicación que queramos con

    <div id="gridContainer"></div>

Editando datos

Para habilitar las operaciones de CRUD, configuramos la opción `editing` del DataGrid. Específicamente, establecemos el modo de edición en «popup» para mostrar un formulario emergente al editar o agregar un registro. Además, permitimos la adición, actualización y eliminación de registros, y personalizamos el diseño del formulario de edición según nuestras necesidades.

Edición de datos

// Editamos los datos del JSON
                    editing: {
                        mode: 'popup',
                        allowAdding: true,
                        allowUpdating: true,
                        allowDeleting: true,
                        popup: {
                            title: 'Editar Registro',
                            showTitle: true,
                            width: 700,
                            height: 325
                        },
                        form: {
                            items: ['nombre', 'apellidos', 'email', 'telefono'],
                            colCount: 2
                        }
                    },

Añadir registros al JSON

// Añadimos nuevos registros al JSON
                           {
                                location: 'before',
                                widget: 'dxButton',
                                options: {
                                    icon: 'save',
                                    onClick: function() {
                                        grid.saveEditData();
                                    }
                                }
                            },

Borrado de datos del JSON

   {
                                location: 'before',
                                widget: 'dxButton',
                                options: {
                                    icon: 'remove',
                                    onClick: function() {
                                        grid.removeRow(grid.option('focusedRowIndex'));
                                    }
                                }
                            }

Añadiendo una barra de herramientas

Con el fin de mejorar la usabilidad, añadimos botones a la barra de herramientas del DataGrid para realizar acciones comunes como añadir, guardar y eliminar registros. Utilizamos el evento `onToolbarPreparing` para insertar estos botones antes de que se renderice la barra de herramientas.

           onToolbarPreparing: function(e) {
                        e.toolbarOptions.items.unshift(
                            {
                                location: 'before',
                                widget: 'dxButton',
                                options: {
                                    icon: 'add',
                                    onClick: function() {
                                        grid.addRow();
                                    }
                                }
                            },

En resumen

En este post, hemos visto cómo crear un CRUD sencillo utilizando DevExtreme DataGrid, de manera sencilla, que permite visualizar y manipular datos de forma amigable para los usuarios.

Como siempre digo, esto no es más que un punto de inicio y una forma de empezar a aplicar este método en tus propios proyectos.

Te dejo enlace a mi repositorio de GitHub, donde tendrás acceso al código del ejemplo.