Comment utiliser un composant jQuery TreeView dans des applications Web (2)

Transformez le composant TreeView hiérarchique en apprenant comment ajouter et supprimer par programme des éléments et des actions associés d'une instance TreeView.

Dans le dernier article traitant de TreeView (Partie 1) vous avez appris les bases de la création d'un composant TreeView. Dans l'épisode d'aujourd'hui, nous allons continuer à développer notre exemple de marque-pages pour mettre en pratique des compétences plus avancées. Plus précisément, vous apprendrez comment ajouter et supprimer des éléments de signets de TreeView. Cela vous permettra d'explorer plusieurs des méthodes disponibles pour l'API TreeView. Nous incorporerons également quelques éléments dont nous avons déjà entendu parler. Ce sera le test final pour déterminer si vous avez maîtrisé le contrôle des composants de navigation Kendo UI . Voici un aperçu de ce que nous allons construire:

Ajout d'éléments à TreeView

Pour ajouter des éléments à notre signet, nous utilise un champ de saisie pour entrer le texte et un bouton qui ajoutera l'élément au dossier actuellement sélectionné lorsque vous cliquez dessus.Pour cet exemple, nous allons ajouter des fichiers aux dossiers.Par conséquent, seuls les nœuds qui ont des éléments enfants peuvent avoir des éléments supplémentaires ajoutés Pour ce faire, nous devrons faire ce qui suit:

1. Créer une instance de TreeView
2. Utiliser l'instance TreeView pour obtenir le nœud sélectionné
3. Créer un bouton UI Kendo avec un écouteur d'événement click [19659007] Ecrire la fonction pour ajouter l'item au noeud sélectionné

La première étape est de créer une instance TreeView et de la stocker dans une variable, ce qui nous permettra d'utiliser les méthodes de TreeView pour d'autres opérations. pour initialiser l'arbre:

 t tree = $ ("# tree"). data ("kendoTreeView"); 

Dans la deuxième étape, nous allons ajouter un événement select à la configuration de TreeView. Nous allons créer un gestionnaire d'événements onSelect qui mettra à jour notre référence à l'élément actuellement sélectionné. C'est le code que nous avons jusqu'ici:

 $ ('# tree'). KendoTreeView ({
  ...
  sélectionnez: onSelect
});

const tree = $ ("# arbre"). data ("kendoTreeView");
laissé sélectionné;

function onSelect (e) {
  selected = tree.dataItem (e.node);
} 

La méthode dataItem prend un élément HTML en paramètre et renvoie un modèle de ses données. Nous faisons cette étape pour que nous puissions accéder aux propriétés du nœud comme le texte et l'ID.

La troisième étape consiste à créer le bouton et à y attacher un gestionnaire d'événements. Le balisage du bouton et du champ de saisie sera placé au-dessus du balisage de l'arbre. Le code pour initialiser le bouton Kendo UI ira juste avant le code d'initialisation de votre arbre. C'est le code que nous allons ajouter:

  
   Ajouter un dossier 


 $ ('# button'). KendoButton ({
  cliquez: addNode
}); 

La dernière étape consiste à créer la fonction addNode . Nous pouvons utiliser la méthode append de TreeView pour ajouter un élément à la liste des signets. La méthode nécessite les données du nouveau nœud et du nœud parent auquel il sera ajouté. C'est l'implémentation:

 function addNode () {
  if (selected.hasChildren) {
    const valeur = $ ('# entrée'). val ();
    noeud const = tree.findByUid (selected.uid);
    tree.append ({texte: valeur, icône: 'fa fa-file'}, noeud);
  }
} 

Nous utilisons la méthode tree.findByUid pour convertir notre modèle en un nœud. Cette méthode est un moyen de trouver un nœud dans un TreeView. Vous pouvez également utiliser findByText et lui passer la valeur selected.text .

Supprimer des éléments de TreeView

Ensuite, nous allons adopter une approche différente pour supprimer un signet. Lorsque nous faisons un clic droit sur un élément, nous voulons qu'un menu apparaisse avec une option de suppression. Lorsque la suppression est sélectionnée, l'élément sera supprimé. Si l'élément est un dossier, il supprimera le dossier avec tous ses enfants. Si vous vous rappelez d'une leçon précédente nous pouvons créer un tel menu avec le composant de menu contextuel Kendo UI. Voici les étapes que nous allons suivre pour ajouter la nouvelle fonctionnalité:

1. Créer un menu contextuel de l'UI Kendo
2. Ajouter un événement de sélection au menu contextuel
3. Créer la fonction pour supprimer un nœud

le menu contextuel nous devons ajouter le HTML à notre page et l'initialiser avec la méthode kendoContextMenu . C'est le balisage et le code qui seront ajoutés:

 $ ('# context'). KendoContextMenu ({
  target: '#tree',
  filtre: '.k-item',
  Source: [
    { text: 'delete' }
  ],
  sélectionnez: deleteNode
}); 

L'option target spécifie le contexte. L'option de filtrage nous permet de cibler des nœuds individuels dans notre TreeView. La classe k-item est le nom utilisé sur tous les nœuds. Lorsque nous faisons un clic droit sur l'un des nœuds, nous pouvons identifier le nœud spécifique via l'événement select. L'événement select se déclenche lorsque vous sélectionnez un élément dans le menu contextuel.

Last, is the est l'implémentation de deleteNode :

 function deleteNode (e) {
  tree.remove (e.target);
} 

À l'intérieur de la fonction deleteNode nous utilisons e.target pour identifier le nœud sur lequel un clic droit a été fait. Tout mettre ensemble, nous avons ceci:

  

    
     Ajouter un fichier 
  
  

  
  

Coming Up – Tooltip, Splitter et Window

Si vous êtes venus si loin, bien fait. Vous êtes prêt à passer au niveau suivant. Dans la prochaine série de leçons, vous maîtriserez l'info-bulle, le séparateur et le composant de fenêtre. L'info-bulle est une fenêtre contextuelle qui apparaît près d'un élément lorsque vous passez la souris ou cliquez dessus. C'est un objet commun que vous rencontrez, mais le séparateur et la fenêtre ne sont pas si communs. Cela les rend très spéciaux à acquérir. Le séparateur vous permet de diviser votre écran en panneaux redimensionnables. Le composant window est un modal avec les contrôles d'une fenêtre typique. Avec ces composants et les autres à venir, vous serez équipé pour créer la prochaine application de chat, le site de partage de code, ou tout ce que vous imaginerez. Plus vous aurez d'outils, plus vous serez capable de construire, donc de code!

Essayez le TreeView pour vous-même

Vous voulez commencer à profiter de la Kendo UI TreeView ou de l'un des quelque 70+ composants d'interface utilisateur Kendo prêts à l'emploi, comme Grid ou Scheduler ? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

Commencer mon test d'interface Kendo

Composants angulaires, réactifs et Vue

Vous cherchez des composants d'interface utilisateur spécifiques? Découvrez le TreeView pour Angular TreeView pour React ou Treeview pour Vue .

Ressources