Get best of the week

Bibliothèque JavaScript Webix vue par un débutant. Partie 4. Travailler avec des données. CRUD



Je suis un développeur front-end débutant. Maintenant, j'étudie et je m'entraîne dans une entreprise informatique de Minsk. L'apprentissage des bases de web-ui a lieu en utilisant la bibliothèque Webix JS à titre d'exemple et je veux partager ma modeste expérience et l'enregistrer comme un petit tutoriel pour cette intéressante bibliothèque d'interface utilisateur.

QUATRIÈME DÉFI


Lorsque vous travaillez avec des données, il est important de pouvoir effectuer plusieurs types d'opérations. Dans le développement Web, CRUD est responsable de cela - quatre fonctions de base. La bibliothèque Webix possède tous les outils pour implémenter CRUD. La base pour résoudre de nouveaux problèmes me servira de matériel des publications précédentes: création d'une interface d'application , modules de projet et travail avec des formulaires .Cet article couvrira les tâches suivantes:

  • éditer les données du tableau via un formulaire;
  • installation de l' éditeur de ligne intégré ;
  • ajouter des données à la liste et au graphique;
  • supprimer des éléments;

Dans la documentation, vous pouvez trouver les widgets List , Treetable , Table utilisés dans l'article .

Les sources sont sur le lien .

L'application de démonstration qui en résulte peut être trouvée ici .

Étape 1. Modification des données via le formulaire


Dans cette étape, je travaillerai avec l'onglet «Tableau de bord» dans lequel le tableau et le formulaire sont dessinés. Le code de la table est dans le fichier table.js, le code du formulaire est dans form.js.

Dans l'article « Utilisation des formulaires », de nouvelles entrées ont été ajoutées à l'aide de la méthode add () , qui a été complétée par la validation des formulaires. Maintenant, le formulaire sera utilisé pour éditer les entrées. Tableau des

widgets J'ajoute un événement onAfterSelect . Lorsque cet événement est déclenché, je vais recevoir des données de la table et les transférer dans les champs du formulaire.


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

La méthode setValues ​​() , dans le code ci-dessus, est responsable du passage des valeurs reçues au formulaire.

J'exécute le code et vérifie le résultat:



dès qu'une ligne du tableau est sélectionnée, ses données entrent automatiquement dans le formulaire et sont prêtes à fonctionner.

Maintenant, je complique le processus: le nouvel enregistrement, comme précédemment, sera ajouté au tableau; si les données sont extraites du tableau et modifiées, je sauvegarde ces modifications.

Je vais réécrire la fonction saveItem et y ajouter de nouvelles méthodes:

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 fonction possède désormais l'algorithme suivant:
  • au début, une vérification est lancée pour deux conditions - si les données du formulaire ont passé la validation et si le formulaire a changé. Les changements dans le formulaire sont surveillés par la méthode isDirty () ;
  • après cela, la condition "item_data.id" vous permet de définir un nouvel enregistrement. Une chaîne est envoyée au formulaire avec toutes ses données, y compris id, pour lesquelles il n'y a pas de champ de texte dans le formulaire, mais elle est requise pour les données. Le formulaire stocke et vous permet de lire toutes les valeurs soumises, nous utilisons donc id pour vérifier;
  • après la réconciliation des enregistrements, soit un nouvel enregistrement est ajouté - par la méthode add () , soit l'élément actuel est mis à jour avec de nouvelles propriétés.


Pour mettre à jour les données modifiées, la méthode updateItem () est utilisée . La méthode prend deux paramètres: l'id de l'élément sélectionné et un ensemble de nouvelles propriétés tirées du formulaire. Lorsque la fonction est appelée, les données actuelles sont remplacées et complétées par de nouvelles.

Résultat:



Étape 2. Installation de l'éditeur intégré


À l'étape précédente, j'ai envisagé la possibilité de modifier les données de table à l'aide d'un formulaire. Mais le formulaire sur la page n'est pas toujours nécessaire, donc j'implémente la méthode d'édition directement dans l'élément. Cette méthode est applicable à la fois dans le tableau et dans d'autres composants pour travailler avec de grandes quantités de données - par exemple, dans une liste.

Je vais commencer par une arborescence dans l' onglet « Produits ». Le code de la table se trouve dans le fichier products_module.js.

Le widget Treetable vous permet de modifier le contenu des tableaux, mais cette fonction est désactivée par défaut. L'édition est configurée à deux endroits: dans la configuration de la table editable:true, dans la configuration et dans la configuration de chaque colonne. Les haut-parleurs sont installés editor:”text”. L'attribut «texte» définit le type d'éditeur. Pour plus d'informations sur les types d'éditeur, consultezdocumentation .

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

Dans le code, j'ai ajouté des éditeurs pour les colonnes Titre et Prix. En cliquant sur n'importe quelle cellule, un éditeur s'y ouvrira - un champ de texte:



Maintenant, j'irai dans l'onglet « Utilisateurs », et j'analyserai l'option de modification du widget Liste . Le code du widget se trouve dans le fichier users_module.js.

L'édition des données est disponible par défaut pour les widgets TreeTable et DataTable. Pour utiliser l'éditeur intégré dans d'autres widgets, vous pouvez utiliser le module EditAbility spécial . J'utilise ce module pour éditer les données du widget List. Pour ce faire, basé sur le widget LIst, je vais créer un composant personnalisé en utilisant la méthode protoUI .

J'écris le nom - la propriété name - du futur widget et hérite des modules nécessaires pour le widget de base.

Prototype de widget de liste:

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

Après avoir appelé protoUI, j'obtiens le composant fini. Il est intégré au widget de la même manière que tous les autres - en le définissant 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> "
}

Étant donné qu'il peut y avoir de nombreux champs dans chaque enregistrement et que le nom et le pays sont immédiatement dessinés dans la feuille de modèle, le paramètre - est ajouté dans la configuration editorValue:”name”, indiquant quel champ peut être modifié.

Résultat:



Étape 3. Ajout de données à la liste et au graphique


Cette partie de l'article utilise des widgets Liste et Graphique, dont le code se trouve dans le fichier users_module.js et rendu dans l' onglet " Utilisateurs ".

Les widgets Graphique et Liste utilisent les mêmes données - un tableau JSON. Par conséquent, lorsque j'implémente la possibilité d'ajouter des données, il est nécessaire qu'elles tombent dans les deux composants.

Pour ce faire, dans le module utilisateurs, je dessine le bouton "Ajouter une nouvelle personne".

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

Cliquer sur le bouton appelle la fonction addPerson ajoutant un nouvel enregistrement à la liste.

Le graphique affiche l'âge de chaque enregistrement, donc un nombre aléatoire sera généré pour une plus grande propagation.

Fonction pour ajouter un nouvel enregistrement:

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

Résultat:



Étape 4. Suppression d'éléments


La suppression des éléments sera illustrée à l'aide du widget Liste comme onglet Utilisateurs et du widget Tableau comme onglet Tableau de bord .

Pour commencer, dans le widget Table, je vais créer une nouvelle colonne dans laquelle je placerai la balise html avec l'icône.

Pour suivre les clics sur les icônes, vous devez utiliser la propriété de table onClick . Il s'agit d'un objet qui stocke les gestionnaires associés aux éléments selon l'une de leurs classes CSS - je l'ai "delete_icon".

Pour traiter les clics sur les icônes, je prends leur classe delete_icon et l'écris dans l'objet onClick sous forme de clé, la valeur de cette clé sera une fonction - notre gestionnaire. Parmi les arguments se trouve l'id de l'enregistrement, donc rien ne l'empêche d'être supprimé à l'aide de la méthode remove () .

Code du widget de table:

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

L'algorithme de suppression de lignes pour le widget Liste est le même que pour le widget Table:

{
    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;
        }
    }
},

Résultat de la suppression de lignes dans l'onglet Utilisateurs: Vous



pouvez trouver l'application terminée ici .

Conclusion


L'implémentation de CRUD à l'aide de la bibliothèque jix de Webix est réalisée de différentes manières: il existe des éditeurs intégrés pour modifier les données et une API qui vous permet de faire de même, mais via un formulaire tiers. L'ajout de données a différents scénarios et, sous la forme, vous pouvez implémenter l'ensemble des fonctions CRUD. Les méthodes sont implémentées avec quelques lignes de code. L'architecture de la bibliothèque facilite la combinaison de diverses fonctions.

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

More articles:


All Articles