Get best of the week

Biblioteca JavaScript de Webix a través de los ojos de un principiante. Parte 4. Trabajar con datos. CRUDO



Soy un desarrollador front-end principiante. Ahora estoy estudiando y entrenando en una empresa de TI de Minsk. Aprender los conceptos básicos de web-ui se lleva a cabo utilizando la biblioteca Webix JS como ejemplo, y quiero compartir mi modesta experiencia y guardarla como un pequeño tutorial para esta interesante biblioteca de interfaz de usuario.

CUARTO RETO


Cuando se trabaja con datos, es importante poder realizar varios tipos de operaciones. En el desarrollo web, CRUD es responsable de esto : cuatro funciones básicas. La biblioteca de Webix tiene todas las herramientas para implementar CRUD. La base para resolver nuevos problemas me servirá como material de publicaciones anteriores: crear una interfaz de aplicación , módulos de proyecto y trabajar con formularios .Este artículo cubrirá las siguientes tareas:

  • editar datos de la tabla a través de un formulario;
  • instalación del editor de línea incorporado ;
  • agregar datos a la lista y al gráfico;
  • eliminar ítems;

En la documentación puede encontrar los widgets List , Treetable , Table utilizados en el artículo .

Las fuentes están en el enlace .

La aplicación de demostración resultante se puede encontrar aquí .

Paso 1. Editar datos a través del formulario


En este paso, trabajaré con la pestaña "Panel de control" en la que se dibujan la tabla y el formulario. El código de la tabla está en el archivo table.js, el código del formulario está en form.js.

En el artículo " Trabajar con formularios ", se agregaron nuevas entradas utilizando el método add () , que se complementó con la validación de formularios. Ahora el formulario se usará para editar entradas. Tabla de

widgets Agrego evento en AfterSelect . Cuando se active este evento, recibiré datos de la tabla y los transferiré a los campos del formulario.


const table = {
    view:"datatable", 
    id:"film_list",
    scroll:"y",
    select:true,
    url:"data/data.js",
    hover:"myhover",
    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:"Film title", fillspace:true},
        { id:"year",  header:"Released", width:100},
        { id:"votes", header:"Votes", width:100},
        { id:"rating", header:"Rating", width:100}
    ],
    on:{
        onAfterSelect(id){
            let values = $$("film_list").getItem(id);
            $$("film_form").setValues(values)
        }
    }
}

El método setValues ​​() , en el código anterior, es responsable de pasar los valores recibidos al formulario.

Ejecuto el código y compruebo el resultado:



tan pronto como se selecciona una fila en la tabla, sus datos entran automáticamente en el formulario y están listos para funcionar.

Ahora complicaré el proceso: el nuevo registro, como antes, se agregará a la tabla; Si los datos se toman de la tabla y se editan, guardo estos cambios.

Reescribiré la función saveItem y le agregaré nuevos métodos:

let saveItem = () => {
    let form = $$( "film_form" );  
    let list = $$( "film_list" );  
    let item_data = $$("film_form").getValues();    
    if( form.isDirty() && form.validate() ){
        if( item_data.id ) 
            list.updateItem(item_data.id, item_data);
        else 
            list.add( item_data );
    }
}

La función ahora tiene el siguiente algoritmo:
  • Al principio, se inicia una verificación para dos condiciones: si los datos del formulario han pasado la validación y si el formulario ha cambiado. Los cambios en el formulario son monitoreados por el método isDirty () ;
  • después de eso, la condición "item_data.id" le permite definir un nuevo registro. Se envía una cadena al formulario con todos sus datos, incluida la identificación, para la cual no hay campo de texto en el formulario, pero se requiere para los datos. El formulario almacena y le permite leer todos los valores enviados, por lo que usamos id para verificar;
  • después de conciliar registros, se agrega un nuevo registro, mediante el método add () , o el elemento actual se actualiza con nuevas propiedades.


Para actualizar los datos editados, se utiliza el método updateItem () . El método toma dos parámetros: identificación del elemento seleccionado y un conjunto de nuevas propiedades tomadas del formulario. Cuando se llama a la función, los datos actuales se reemplazan y complementan con otros nuevos.

Resultado:



Paso 2. Instalar el editor incorporado


En el paso anterior, consideré la opción de editar los datos de la tabla usando un formulario. Pero el formulario en la página no siempre es necesario, por lo que implemento el método de edición directamente en el elemento. Este método es aplicable tanto en la tabla como en otros componentes para trabajar con grandes cantidades de datos, por ejemplo, en una lista.

Comenzaré con una vista de árbol en la pestaña " Productos ". El código de la tabla está en el archivo products_module.js.

El widget Treetable le permite editar el contenido de las tablas, pero esta función está deshabilitada de manera predeterminada. La edición se configura en dos lugares: en la configuración de la tabla editable:true, en la configuración y en la configuración de cada columna. Los altavoces están configurados editor:”text”. El atributo "texto" establece el tipo de editor. Para obtener más información sobre los tipos de editor, veala documentación .

const products = {
    editable:true,
    view:"treetable",
    scrollX:false,
    columns:[
        { id:"id", header:"", width:50 },
        { id:"title", header:"Title", fillspace:true, 
        template:"{common.treetable()} #title#", editor:"text" },
        { id:"price", header:"Price", width:200, editor:"text" }
    ],
    select:"row",
    url:"data/products.js",
    rules:{
        "price":webix.rules.isNotEmpty,
        "title":webix.rules.isNotEmpty
    }
}

En el código, agregué editores para las columnas Título y Precio. Al hacer clic en cualquier celda en ellas, se abrirá un editor, un campo de texto:



ahora iré a la pestaña " Usuarios " y analizaré la opción de editar el widget Lista . El código del widget está en el archivo users_module.js.

La edición de datos está disponible de forma predeterminada para los widgets TreeTable y DataTable. Para usar el editor incorporado en otros widgets, puede usar el módulo especial EditAbility . Yo uso este módulo para editar los datos del widget Lista. Para hacer esto, basado en el widget LIst, crearé un componente personalizado usando el método protoUI .

Escribo el nombre, la propiedad del nombre, del widget futuro y heredo los módulos necesarios para el widget base.

Listar prototipo de widget:

webix.protoUI({
    name:"editlist"
}, webix.EditAbility, webix.ui.list);

Después de llamar a protoUI, obtengo el componente terminado. Está incrustado en el widget de la misma manera que todos los demás, mediante la configuración view:"editlist".

view: "editlist",
editable:true,
editor:"text",
editValue:"name",
id:"user_list",
select:true,
url:"data/users.js",
template:"#name# from #country# <span class='webix_icon wxi-close'></span> "
}

Dado que puede haber muchos campos en cada registro, y el nombre y el país se representan a la vez en la hoja de plantilla, la configuración - se agrega en la configuración editorValue:”name”, lo que indica qué campo se puede editar.

Resultado:



Paso 3. Agregar datos a la lista y al gráfico


En esta parte del artículo, Lista y Gráfico, se utilizan widgets, cuyo código se encuentra en el archivo users_module.js y se representa en la pestaña " Usuarios ".

Los widgets de gráficos y listas usan los mismos datos: una matriz JSON. Por lo tanto, cuando implemento la capacidad de agregar datos, es necesario que caigan en ambos componentes.

Para hacer esto, en el módulo de usuarios, dibujaré el botón "Agregar nueva persona".

{
    cols:[
        { 
        view:"button", 
        id:"btn_add_person", 
        value:"Add new person", 
        width:150, css:"webix_primary", 
        click:addPerson
        },
       {}
    ]
}

Al hacer clic en el botón, la función addPerson agrega un nuevo registro a la lista.

El gráfico muestra la antigüedad de cada registro, por lo que se generará un número aleatorio para una extensión mayor.

Función para agregar un nuevo registro:

let addPerson = () => {
    let obj = {
        name:"Some name",
        age:Math.floor(Math.random() * 80) + 10, 
        country:"Some country"
    }
    $$("user_list").add(obj);
    $$("chart").add(obj);
};

Resultado:



Paso 4. Eliminar elementos


La eliminación de elementos se demostrará utilizando el widget Lista como pestaña Usuarios y el widget Tabla como pestaña Panel .

Para empezar, en el widget Tabla crearé una nueva columna en la que colocaré la etiqueta html con el icono.

Para realizar un seguimiento de los clics en los iconos, debe usar la propiedad de tabla onClick . Este es un objeto que almacena controladores asociados con elementos de acuerdo con una de sus clases CSS. Lo tengo "delete_icon".

Para procesar clics en iconos, tomo su clase delete_icon y la escribo en el objeto onClick como una clave, el valor de esta clave será una función: nuestro controlador. Entre los argumentos viene la identificación del registro, por lo que nada impide que se elimine utilizando el método remove () .

Código de widget de tabla:

const table = {
    view:"datatable", 
    id:"film_list",
    scroll:"y",
    select:true,
    url:"data/data.js",
    hover:"myhover",
    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:"Film title", fillspace:true},
        { id:"year",  header:"Released", width:100},
        { id:"votes", header:"Votes", width:100},
        { id:"rating", header:"Rating", width:100},
        { header:"", template:"<span class='webix_icon wxi-close delete_icon'></span>", 
        width:35}
    ],
    onClick:{
        delete_icon(e, id){
        this.remove(id);
        return false;
        }
    },
    on:{
        onAfterSelect(id){
            let values = $$("film_list").getItem(id);
            $$("film_form").setValues(values)
        }
    }
}

El algoritmo de eliminación de filas para el widget Lista es el mismo que para el widget Tabla:

{
    view: "editlist",
    editable:true,
    editor:"text",
    editValue:"name",
    id:"user_list",
    select:true,
    url:"data/users.js",
    template:`#name# from #country# 
    <span class='webix_icon wxi-close delete_icon'></span> `,
    onClick:{
        delete_icon(e, id){
            this.remove(id);
            return false;
        }
    }
},

El resultado de eliminar líneas en la pestaña Usuarios:



puede encontrar la aplicación terminada aquí .

Conclusión


La implementación de CRUD utilizando la biblioteca jix de Webix se logra de varias maneras: hay editores integrados para cambiar los datos y una API que le permite hacer lo mismo, pero a través de un formulario de terceros. Agregar datos tiene varios escenarios, y en la forma puede implementar todo el conjunto de funciones CRUD. Los métodos se implementan con unas pocas líneas de código. La arquitectura de la biblioteca facilita la combinación de varias funciones entre sí.

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles