juin 18, 2018

Projecteur de composants: Treeview (Partie 1)

Pour afficher les éléments dans une structure arborescente hiérarchique avec des nœuds parent et enfant extensibles, vous avez besoin d'une vue arborescente. Voyez comment vous pouvez facilement créer et personnaliser une arborescence personnalisée dans l'interface utilisateur de Kendo.

Dans un projecteur de composants récent, vous avez pris le contrôle de la barre d'outils . Comme la barre d'outils, ce composant suivant est également un ajout unique à votre offre d'outils. L'arborescence est un composant qui affiche les éléments dans une structure arborescente hiérarchique. Chaque nœud parent de l'arborescence peut être développé et réduit pour afficher et masquer ses nœuds enfants. Les nœuds enfants sont indentés pour montrer le parent auquel ils appartiennent. Une arborescence est utile lorsque votre contenu a une racine unique dont tous les autres éléments proviennent. Il peut être utilisé dans un éditeur de code pour afficher la structure de fichier d'un projet ou dans un navigateur pour lister les signets d'un utilisateur.

Ensuite, vous verrez comment implémenter le composant Kendo UI treeview .

Créer un Treeview à partir du HTML

L'implémentation de base pour un treeview peut être faite à partir d'un élément

est la racine de l'arbre. Les sous-arbres sont ajoutés en plaçant un élément
- . Ensuite, vous initialisez le composant en appelant $ (element) .kendoTreeView () . Voici des exemples d'une arborescence avec différents thèmes. Le premier exemple utilise le thème de l'interface utilisateur de Kendo. Le deuxième exemple utilise le thème Bootstrap. Et le troisième exemple utilise le thème Matériel.
  
  Voici le code pour créer l'exemple: Entrez le dojo pour pratiquer.
```
  
     Exemple d'UI de Kendo 
    
       
  
    
      
         Marque-pages
        
          
             tech
            
             tutoriels 
             blogs 
            
          
           travail 
        
      
    
  
```
  Création d'une arborescence à partir de données
  Une autre façon d'initialiser une arborescence consiste à configurer l'option dataSource du composant. Le dataSource prend un tableau d'éléments. Ces objets représentent le niveau le plus haut de l'arbre. Comme notre arbre n'a qu'un seul noeud en haut, la source de données contiendra un seul objet. Pour ajouter une sous-arborescence à un nœud, un tableau items est ajouté à l'objet. Le code HTML est réduit à un seul élément vide. Voici le code mis à jour pour notre treeview:
```
 
```
  Personnalisation d'une arborescence avec des modèles
  Les modèles vous permettent de personnaliser l'apparence des éléments dans votre arborescence. Le modèle peut être un élément HTML ou contenir des propriétés de l'élément. Vous définissez le modèle en ajoutant un champ aux options de l'arborescence. Pour notre exemple de marque-page, nous souhaitons placer une icône de dossier à côté des nœuds parents et une icône de fichier à côté des nœuds feuilles. C'est ce que nous allons recréer:
  
  Si vous deviez écrire le HTML, le balisage ressemblerait à ceci:
```
   work
```
  Pour convertir ceci en modèle, nous devrons remplacer le nom de classe d'icône et le texte du noeud par des variables. Pour utiliser des variables dans notre modèle, nous aurons besoin d'utiliser une syntaxe spéciale. La syntaxe commence par # = et se termine par # . Entre les deux sont les données. La syntaxe pour obtenir une valeur de l'un des éléments est item.key où key est remplacé par le nom de la propriété. Par exemple, pour obtenir le texte d'un élément, nous utilisons item.text .
  Dans cet exemple, nous allons ajouter une nouvelle propriété à nos éléments appelés icon qui a la classe CSS de notre police d'icônes. Nous utiliserons les polices d'icônes Font Awesome mais vous pouvez également utiliser une autre police d'icône. Pour que notre vue d'arbre reconnaisse notre propery d'icône, nous devons définir le nom du champ d'image-objet avec l'option dataSpriteCssClassField . Voici notre code mis à jour avec le modèle:
```
 $ ('# tree'). KendoTreeView ({
  modèle: '# = item.text #',
  dataSpriteCssClassField: 'icône',
  Source: [
    { text: 'Bookmarks', icon: 'fa fa-folder', items: [
      { text: 'tech', icon:' fa fa-folder', items: [
        { text: 'tutorials', icon: 'fa fa-file' },
        { text: 'blogs', icon: 'fa fa-file' }
      ]},
      {texte: 'travail', icône: 'fa fa-file'}
    ]}
  ]
}); 
```
  Conclusion
  Les arborescences sont mieux utilisées lorsque votre contenu est imbriqué par opposition à plat. Outre les options de configuration que nous avons passées en revue, le composant treeview de Kendo UI a de nombreuses autres fonctionnalités. Vous pouvez réorganiser les éléments dans l'arborescence en les faisant glisser et en les déposant, ce qui est certainement applicable à notre exemple de signet. Si votre arborescence représente un répertoire, vous pouvez rendre les éléments pouvant être déplacés et attacher un écouteur d'événement pour déplacer l'emplacement du fichier. Les éléments Treeview peuvent également avoir des cases à cocher qui écoutent les événements de vérification. Comme il y a beaucoup plus à faire avec les arborescences, nous approfondirons son API. Dans la prochaine leçon, je vais vous montrer comment ajouter et supprimer des éléments de l'arborescence
  Voulez-vous essayer l'interface utilisateur de Kendo?
  Vous voulez commencer à profiter de l'arborescence de l'UI ou des 70 autres 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.