Bibliothèque JavaScript Webix vue par un débutant. Partie 5. Travailler avec des données côté utilisateur

CINQUIÈME TÂCHE

• filtrer et trier les données des tables;
• filtrage et tri via l'API;
• Regroupement des données d'une table arborescente
• synchronisation des composants;

Filtrage et tri des données de table

Le code du widget Table est dans le fichier table.js et rendu dans l'onglet «Dashboard».

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}
]

    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}
    ]

Tri et filtrage API

Le code du widget Liste se trouve dans le fichier users_module.js et est rendu dans l'onglet «Utilisateurs».

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

$$("list_input").attachEvent("onTimedKeyPress",function(){
    var value = this.getValue().toLowerCase();
    $$("user_list").filter(function(obj){
        return obj.name.toLowerCase().indexOf(value) !== -1;
    })
});

• en utilisant la méthode attachEvent, j'ajoute un gestionnaire à l'événement onTimedKeyPress ;
• l'événement onTimedKeyPress est déclenché par la saisie de caractères dans le champ de texte, mais avec un court délai, afin de ne pas activer le filtre à chaque frappe;
• puis - je obtenir le texte saisi et utiliser le filtre méthode pour commencer le filtrage - matchs trouver dans le widget List.

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")
    }},
]

Regroupement des données de la table arborescente

Le code du widget TreeTable est situé dans le fichier products_module.js et rendu dans l'onglet «Poducts».

[
    {"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}
]

• immédiatement lors du chargement;
• en utilisant dynamiquement les méthodes de groupe et de dissociation .

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" }
    }
}

• paramètre requis par , par lequel les données sont regroupées. Voici l'un des champs («catégorie»);
• objet de la carte - nous décrivons ici les champs de données pour les groupes créés. Le regroupement rompt les données source selon les paramètres spécifiés et crée pour eux des «enregistrements parents». Grâce à la carte, nous pouvons ajouter de nouveaux champs à ces enregistrements. Pour que les données du tableau s'affichent correctement, j'ajouterai le champ «titre». Je vais y passer la valeur du paramètre par lequel le regroupement se produit.

Synchronisation des composants

La tâche utilise des widgets Graphique et Liste, dont le code se trouve dans le fichier users_module.js et est rendu dans l'onglet «Utilisateurs»

{
    view:"chart",
    id:"chart",
    type:"bar",
    value:"#age#",
    label:"#age#",
    xAxis:{
        template:"#name#",
        title:"Age"
    }
}

$$("chart").sync($$("user_list"));

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

Généralisation