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. Quiero compartir mi modesta experiencia y guardarla como un pequeño tutorial sobre esta interesante biblioteca de interfaz de usuario.QUINTA TAREA
En un artículo anterior, Trabajando con datos , basado en funciones CRUD, escribí sobre tareas estándar para administrar datos de aplicaciones. En este punto, intentaré hacer que la aplicación sea más fácil de usar y darme cuenta de la capacidad de filtrar, ordenar y agrupar datos. En el artículo consideraré las siguientes tareas: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 terminada se puede encontrar aquí .Filtrar y ordenar datos de la tabla
Comencemos con las tablas: las utilizo con mayor frecuencia para trabajar con muchos datos. Las tablas en la biblioteca de Webix tienen una serie de filtros integrados que se configuran directamente en el encabezado de los widgets Table y TreeTable. En el widget Tabla , uso dos opciones: un filtro de texto simple ( textFilter ) y un filtro con un conjunto de opciones en la lista desplegable ( selectFilter ). La tabla le permite agregar un filtro para cada columna. Haré esto por dos: título y año. Estableceré el encabezado en ellos en lugar de una cadena con una matriz, para que se ajuste al encabezado y al filtro. El segundo elemento de la matriz es un objeto con una propiedad de contenido y un nombre de filtro.El código para el widget Tabla está en el archivo table.js y se representa en la pestaña "Panel".
Cuando los caracteres se ingresan en los "textFilter"datos, se filtrarán por coincidencia por subcadena. Si selecciona la opción "selectFilter", por el valor seleccionado.columns:[
{ id:"rank", header:"", width:50, css:"rank"},
{ id:"title", header:["Film title", { content:"textFilter"}], fillspace:true },
{ id:"year", header:["Released", {content:"selectFilter" }], width:100 },
{ id:"votes", header:"Votes", width:100 },
{ id:"rating", header:"Rating", width:100 },
{ header:"", template:"<span class='webix_icon wxi-close'></span>", width:35}
]
Resultado de filtrado por subcadena "estrella":
Resultado de elementos de filtrado por valor seleccionado "1991":
Clasificación. Al igual que con los filtros, la clasificación es tan fácil de poner a disposición del usuario. Para hacer esto, es suficiente complementar la configuración de la columna con la propiedad sort . Hay varios tipos de ordenación listos para usar: por valores numéricos, por fecha y por cadena. Para las columnas de año, votos y calificación, estableceré la configuración sort: "int" para ordenar por valores numéricos. Para la columna de título, el valor será "cadena". columns:[
{ id:"rank", header:"", width:50, css:"rank"},
{ id:"title", header:["Film title", { content:"textFilter"}], fillspace:true,
sort:"string"},
{ id:"year", header:["Released", {content:"selectFilter" }], width:100, sort:"int"},
{ id:"votes", header:"Votes", width:100, sort:"int"},
{ id:"rating", header:"Rating", width:100, sort:"int"},
{ header:"", template:"<span class='webix_icon wxi-close'></span>", width:35}
]
Al hacer clic en la columna del encabezado, los datos se ordenarán según su tipo. Resultado de clasificación:
Clasificación y filtrado de API
Las soluciones listas para usar para filtrar y clasificar elementos solo tienen tablas. Pero, en general, todos los widgets admiten estas características a través de los métodos API apropiados: filtrar y ordenar. Demostraré el filtrado y la clasificación utilizando la API con el widget Lista .El código para el widget Lista está en el archivo users_module.js y se representa en la pestaña "Usuarios".
Filtración. En la pestaña Usuarios , después del botón "Agregar nueva persona", instalaré el widget Texto , que utilizo como filtro para los nombres de la lista.cols:[
{
view:"button", id:"btn_add_person",
value:"Add new person", width:150, css:"webix_primary",
click:addPerson
},
{
view:"text", id:"list_input"
},
]
Ahora abriré el archivo script.js y agregaré la lógica responsable de filtrar los elementos.$$("list_input").attachEvent("onTimedKeyPress",function(){
var value = this.getValue().toLowerCase();
$$("user_list").filter(function(obj){
return obj.name.toLowerCase().indexOf(value) !== -1;
})
});
Los elementos se filtran de acuerdo con este principio:- usando el método attachEvent, agrego un controlador al evento onTimedKeyPress ;
- el evento onTimedKeyPress se activa al ingresar caracteres en el campo de texto, pero con un breve retraso, para no activar el filtro con cada pulsación de tecla;
- luego obtengo el texto ingresado y utilizo el método de filtro para comenzar a filtrar: buscar coincidencias en el widget Lista.
Resultado de filtrado a través de API:
Ordenar. Los elementos de la lista de widgets se ordenarán haciendo clic en los botones “Sort asc”y “Sort desc”.Para crear botones en la pestaña Usuarios , después del cuadro de texto agregaré dos widgets de Botón con un controlador de eventos de clic .cols:[
{
view:"button", id:"btn_add_person",
value:"Add new person", width:150, css:"webix_primary",
click:addPerson
},
{
view:"text", id:"list_input"
},
{ view:"button", id:"btn_asc", width:150, value:"Sort asc", css:"webix_primary",
click:()=>{
$$("user_list").sort("#name#","asc")
}},
{ view:"button", id:"btn_desc", width:150, value:"Sort desc", css:"webix_primary",
click:()=>{
$$("user_list").sort("#name#","desc")
}},
]
Dentro del controlador de clics, el método de clasificación acepta el parámetro: el nombre del campo por el cual estamos clasificando los datos y la dirección de clasificación “asc”(ascendente) - ascendente y “desc”(descendente) - descendente. Por defecto, los datos se consideran filas y se ordenan en consecuencia.Resultado (los nombres en la hoja están ordenados alfabéticamente):
Agrupación de datos de la tabla de árbol
Considere una situación en la que los datos deben agruparse de acuerdo con parámetros arbitrarios.Estudiaré la agrupación usando el widget TreeTable como ejemplo.El código del widget TreeTable se encuentra en el archivo products_module.js y se representa en la pestaña "Poductos".
En este artículo: Módulos, gráficos, tablas de árbol y trabajo con datos. CRUDO , utilicé datos jerárquicos en una tabla de árbol. Para resolver este problema, los cambié para obtener una matriz lineal. Me deshice de la jerarquía y transfirí el campo a cada registro “category”.[
{"id": "1.1", "title": "Standard Ticket", "price": 21, "category":"Cinema", "rank":1.1},
{"id": "2.1", "title": "Cola", "price": 10, "category":"Cafe", "rank":2.1},
{"id": "3.1", "title": "Flowers", "price": 10, "category":"Other", "rank":3.1}
]
Hay dos formas de agrupar datos en una tabla:Los parámetros para estos métodos son los mismos y necesito agrupar los datos una vez tan pronto como lleguen, así que utilizo la primera opción.En la configuración del widget TreeTable, agrego la propiedad del esquema . Esta propiedad determina por qué esquema se procesarán los datos en diferentes situaciones. Entre los controladores en sheme está el método $ group , que necesito para agrupar los datos.const products = {
editable:true,
view:"treetable",
scrollX:false,
columns:[
{ id:"rank", header:"", width:50 },
{ id:"title", header:"Title", fillspace:true, template:"{common.treetable()} #title#"},
{ id:"price", header:"Price", width:200, editor:"text" }
],
select:"row",
url:"data/products.js",
scheme:{
$group:{
by:"category",
map:{
title:["category"]
}
},
$sort:{ by:"value", dir:"asc" }
}
}
Dentro del manejador $ group, se utilizan dos parámetros:- parámetro requerido por , por el cual se agrupan los datos. Aquí está uno de los campos ("categoría");
- objeto de mapa : aquí describimos los campos de datos para los grupos creados. La agrupación rompe los datos de origen de acuerdo con los parámetros especificados y crea "registros primarios" para ellos. A través del mapa podemos agregar nuevos campos a estos registros. Para que los datos de la tabla se muestren correctamente, agregaré el campo "título". Le pasaré el valor del parámetro por el cual ocurre la agrupación.
Además, configuré la función $ sort para ordenar los datos agrupados en orden alfabético.Resultado de agrupación:
Sincronización de componentes
La tarea utiliza widgets de gráficos y listas, 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. Estos componentes se pueden vincular de tal manera que todos los cambios de datos en uno de ellos (la fuente) se transmitan a otro. Para hacer esto, use el método de sincronización.El método de sincronización le permite copiar datos de un componente y transferirlos a otro. Al mismo tiempo, los cambios en el componente principal, como agregar, eliminar, etc., se reflejan inmediatamente en otro.Para empezar, en el widget Gráfico - gráfico - eliminaré el enlace de datos.{
view:"chart",
id:"chart",
type:"bar",
value:"#age#",
label:"#age#",
xAxis:{
template:"#name#",
title:"Age"
}
}
Ahora, en el archivo script.js, utilizando el método de sincronización, sincronizo el widget Gráfico con el widget Lista .$$("chart").sync($$("user_list"));
En la función addPerson, la adición se deja solo para el widget Lista.let addPerson = () => {
let obj = {
name:"Some name",
age:Math.floor(Math.random() * 80) + 10,
country:"Some country"
}
$$("user_list").add(obj);
};
Ahora, al agregar y eliminar entradas de la lista, se producirán cambios en el gráfico. Ordenar y filtrar en el widget Lista ahora afectará los datos en el Gráfico.
Generalización
Utilizando ejemplos prácticos, mostré cómo puede mejorar la experiencia del usuario. Además de la clasificación y el filtrado estándar utilizando la API, se dominó la capacidad incorporada para hacer esto en los widgets Table y TreeTable con una configuración. Se demostró un método para agrupar datos en una tabla, y el ejemplo de sincronización amplió la capacidad de mejorar el funcionamiento de los widgets que utilizan la misma fuente de datos.La aplicación terminada se puede encontrar aquí .