Angular Tree Grid - Arborescence performante
- Charger de grandes quantités de données en chargeant dynamiquement les éléments enfants à la demande.
- Inclure des interactions UI flexibles : étendre/réduire les enregistrements parents, éditer des dialogues, etc.
- Apparence attrayante avec des thèmes intégrés tels que Fabric, Bootstrap, etc.
Quick Overview Video
Trusted by the world’s leading companies
Aperçu
L’Angular TreeGrid est un composant riche en fonctionnalités permettant de visualiser efficacement des données auto-référentielles et hiérarchiques sous forme tabulaire (structure en arbre). Son riche ensemble de fonctionnalités comprend : liaison de données, virtualisation, édition, tri, recherche, filtrage, défilement infini, pagination, lignes/colonnes figées, exportation vers plusieurs formats, agrégation de lignes, et plus.
Pourquoi choisir Syncfusion Essential Studio® Angular Tree Grid ?
Haute performance
Affiche les données de manière hiérarchique ; sa conception optimisée offre de hautes performances et peut charger des millions d’enregistrements en quelques secondes.
Liaison de données fluide
Liez les données de manière fluide avec diverses sources de données locales et distantes telles que JSON, OData, WCF et services Web RESTful à l’aide d’un gestionnaire de données.
Grille auto-référentielle et hiérarchique
L’Angular TreeGrid est conçu pour visualiser des données auto-référentielles et hiérarchiques sous forme tabulaire, ce qui met en évidence les relations entre enregistrements parents et enfants.
Édition flexible
L’Angular TreeGrid prend en charge les opérations Create, Read, Update et Delete (CRUD) avec des données observables. Il édite des tableaux JSON ou des services de données distants via le gestionnaire de données.
S’adapte à toutes les résolutions
Le Tree Grid dispose d’une mise en page hautement responsive et d’un design optimisé pour ordinateurs de bureau, écrans tactiles et smartphones. Il fonctionne bien sur tous les appareils mobiles sous iOS, Android ou Windows.
Créer vos propres modèles
Avec les templates, les utilisateurs peuvent créer une interface personnalisée dans l’Angular TreeGrid selon les besoins de leur application en utilisant une large gamme d’options de template.
Thèmes attractifs et personnalisables
Design moderne avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, etc. Utilisez l’outil en ligne Theme Studio pour personnaliser facilement les thèmes de l’Angular TreeGrid.
Globalisation et localisation
Permet aux utilisateurs de différentes régions d’utiliser le Tree Grid en formatant dates, devises et nombres selon leurs préférences.
Exemple de code Angular Tree Grid
Commencez facilement avec l’Angular TreeGrid (Tree Table) en quelques lignes de HTML et TypeScript, comme démontré ci‑dessous. Consultez également notre Exemple Angular Tree Grid qui montre comment rendre et configurer un Tree Grid dans Angular.
<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='350' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90><e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
selector: 'ej2-treegrid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = sampleData;
}
}Indicateur de chargement (squelette)
Le Tree Grid affiche un effet de scintillement comme indicateur de chargement lors de la récupération et de la liaison des données pendant le rendu initial, le rafraîchissement ou après des actions du grid comme le tri, le filtrage, etc. Le Tree Grid propose deux types d’effets : spinner et shimmer.
Colonnes
Les colonnes définissent le schéma d’une source de données dans l’Angular TreeGrid. Les fonctionnalités incluent le formatage, la définition des colonnes, le retour à la ligne du texte, le sélecteur de colonnes, le menu de colonnes, le réordonnancement des colonnes, et d’autres fonctionnalités importantes.
Pagination
La pagination permet d’afficher un segment de données depuis la source de données assignée. L’Angular TreeGrid propose une interface de pagination intégrée avec des options de personnalisation complètes. Il dispose également d’un mode de pagination à la demande pour une récupération efficace des données depuis des services Web distants.
Tri
L’Angular TreeGrid permet aux utilisateurs de trier une colonne en cliquant simplement sur l’en-tête. Un Ctrl + clic sur l’en-tête effectue un tri multiple. Triez les données par ordre croissant ou décroissant.
Filtrage
Le filtrage aide à afficher des enregistrements spécifiques ou liés qui correspondent à un critère donné. Il prend en charge divers types de filtres, y compris des filtres puissants de type Excel. Le filtrage dans l’Angular TreeGrid permet aux utilisateurs de choisir des types de filtres appropriés, de définir leur propre logique de filtrage et de personnaliser l’interface de filtrage selon les besoins de l’application. Le filtrage peut également prendre en compte les enregistrements parents ou enfants associés.
Sélection
L’Angular TreeGrid permet de sélectionner des lignes ou des cellules. Une ou plusieurs lignes/cellules peuvent être sélectionnées en maintenant Ctrl ou Command, ou de manière programmatique.
Édition
L’Angular TreeGrid prend en charge intégralement les opérations Create, Read, Update et Delete (CRUD). En complément des composants d’édition intégrés pour modifier une valeur de colonne particulière, le support des templates permet aux utilisateurs de créer des composants éditeurs personnalisés adaptés à leurs besoins. Les opérations d’édition s’effectuent avec des collections JSON ou via des services de données distants à l’aide du gestionnaire de données.
Glisser‑déposer de lignes
L’Angular TreeGrid permet aux utilisateurs de glisser‑déposer des lignes au sein du même Tree Grid ou d’un autre. Cette fonctionnalité est particulièrement utile pour réorganiser les données et offrir une expérience utilisateur plus intuitive.
Agrégation
Les agrégats pour les valeurs de colonne peuvent être affichés facilement grâce à la fonctionnalité d’agrégation. Les agrégats peuvent être personnalisés pour afficher leur valeur à chaque niveau hiérarchique à l’aide de types de synthèse prédéfinis.
Colonnes figées
Les colonnes figées sont visibles à gauche, à droite ou des deux côtés de l’Angular TreeGrid et rendent le reste du contenu du tableau déroulable. Elles sont principalement utilisées pour comparer des valeurs de cellules.
Recherche
Vous pouvez rechercher des enregistrements à l’aide de la méthode de recherche. Intégrez une zone de texte de recherche dans la barre d’outils du Angular TreeGrid en ajoutant des éléments de recherche.
Info-bulle personnalisée
Le composant Angular TreeGrid vous permet de définir des info-bulles pour les cellules du tree grid. Survolez les nœuds de l’arbre pour afficher le texte de l’info-bulle.
En-têtes persistants
Gardez les en-têtes de colonne toujours visibles lors du défilement des données. L’en-tête persistant fournit un contexte constant, ce qui facilite l’interprétation et l’analyse de grands ensembles de données.
Exportation
Export vers Excel, PDF, CSV
Exportez facilement le Tree Grid HTML5 dans divers formats tels qu’Excel, PDF ou CSV. Les utilisateurs peuvent également personnaliser le document exporté de manière programmatique.
Impression
Les utilisateurs peuvent imprimer les données soit via l’option d’impression de la barre d’outils, soit de manière programmatique. Imprimez toutes les lignes d’un Angular TreeGrid indépendamment du nombre de pages, ou imprimez uniquement la page actuellement affichée.
Fonctionnalités supplémentaires
Hauteur des lignes
La hauteur des lignes est un facteur majeur pour l’affichage du nombre d’enregistrements dans la zone de visualisation, et elle est facilement personnalisable selon les exigences UI de l’application. Il est également possible de définir la hauteur des lignes de manière conditionnelle.
Copier dans le presse‑papier
Le presse‑papier offre une option pour copier les données des lignes ou cellules sélectionnées. Utilisez les combinaisons Ctrl+C et Ctrl+Shift+H pour copier les données avec ou sans en‑têtes, respectivement.
Menu contextuel
Le menu contextuel améliore les actions utilisateur dans l’Angular TreeGrid via un menu popup. Il apparaît lors d’un clic droit sur une cellule, un en‑tête ou le pager. En plus des éléments de menu par défaut intégrés, il permet d’ajouter des éléments de menu contextuel personnalisés.
Largeur et hauteur
Permet de modifier la taille de l’Angular TreeGrid en définissant les propriétés width et height. Des barres de défilement horizontales et verticales apparaîtront lorsque le contenu déborde de l’élément. Pour que l’Angular TreeGrid remplisse son conteneur parent, définissez simplement height et width sur 100%.
En‑têtes empilés
Les en‑têtes empilés permettent de grouper et de visualiser les en‑têtes de colonnes de manière empilée. Il n’y a pas de limite au nombre de colonnes pouvant être empilées. L’utilisateur peut effectuer toutes les actions de l’Angular TreeGrid même lorsque les colonnes sont empilées.
Accessibilité
Navigation au clavier
Le Tree Grid garantit que chaque cellule est accessible au clavier. Les principales fonctionnalités telles que l’expansion/repli des lignes enfants, le tri, la sélection et l’édition peuvent être effectuées uniquement via des commandes clavier ; aucune interaction souris n’est requise. Cela facilite la création d’applications hautement accessibles avec ce composant.
Lecteurs d’écran
L’Angular TreeGrid offre un support complet WAI‑ARIA pour l’accessibilité. Son interface comprend des éléments visuels à fort contraste, offrant une meilleure expérience aux personnes malvoyantes. De plus, les descriptions UI pertinentes sont facilement accessibles via des technologies d’assistance telles que les lecteurs d’écran.
Droite à gauche (RTL)
L’affichage de droite à gauche permet d’afficher le texte et la mise en page de l’Angular TreeGrid de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL.
Compatibilité des versions Angular
Grâce aux améliorations continues des versions d’Angular, l’Angular Tree Grid est maintenu à jour pour être compatible avec les versions à partir d’Angular 4 jusqu’à la dernière version.
Autres frameworks pris en charge
Le Tree Grid est disponible pour les frameworks Blazor, React, JavaScript et Vue. Découvrez ses options spécifiques à chaque plateforme via les liens ci‑dessous :
Navigateurs pris en charge
L’Angular Tree Grid fonctionne correctement avec tous les navigateurs web modernes, notamment Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Angular Tree Grid ? Nos vidéos tutoriels et la documentation peuvent vous aider.
Regarder maintenant Lire maintenantPlus de 150+ composants d'interface utilisateur Angular
TOUS LES COMPOSANTS
Composants intelligents
Grilles
Visualisation des données
Listes déroulantes
Visionneuses et éditeurs de fichiers
Boutons
Chat interactif
Champs de saisie
Navigation
Formulaires
Notifications
Foire aux questions
Pourquoi choisir Syncfusion Essential Studio® Angular Tree Grid ?
Charger de grandes quantités de données en chargeant dynamiquement les enfants à la demande.
Inclure des interactions UI flexibles comme l’extension et le repli des enregistrements parents, l’édition via dialogue, et plus encore.
Liaison de données flexible avec prise en charge des sources locales et distantes telles que JSON, services RESTful, OData et WCF via le gestionnaire de données.
- L’un des meilleurs Tree Grid pour Angular du marché, offrant une interface riche en fonctionnalités.
- Apparence attrayante grâce à des thèmes intégrés tels que Fabric, Bootstrap, Material, etc.
- Configuration et API simples.
- Prend en charge tous les navigateurs modernes.
- Compatible tactile et responsive.
Ressources d’apprentissage étendues telles que des démos, la documentation et des vidéos pour apprendre rapidement et commencer avec l’Angular Tree Grid.
Où puis‑je trouver la démo du Syncfusion Angular Tree Grid ?
Vous pouvez consulter notre démo Angular Tree Grid, qui montre comment rendre et configurer le TreeGrid.
Puis-je télécharger et utiliser Syncfusion Angular Tree Grid gratuitement ?
Non, il s’agit d’un produit commercial nécessitant une licence payante. Toutefois, une licence communautaire gratuite est disponible pour les entreprises et personnes dont l’organisation a un chiffre d’affaires annuel inférieur à 1 million USD et cinq développeurs ou moins.
Comment démarrer avec Syncfusion Angular Tree Grid ?
Un bon point de départ est notre documentation complète getting started.
Nos clients nous aiment
Grâce à un excellent ensemble d’outils et à une excellente équipe d’assistance, Syncfusion® réduit le temps de développement de ses clients.Voici quelques-uns de leurs témoignages.
An amazing toolset to accelerate UI development
The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.
Shrikant P
Customer Success Manager
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
Voir de vraies histoires de réussite
Des développeurs du monde entier font confiance à Essential Studio de Syncfusion pour simplifier les projets complexes et accélérer leur livraison. Grâce à sa vaste bibliothèque de contrôles d’interface utilisateur, à ses SDK puissants et à son support fiable, Essential Studio aide les équipes à créer des applications prêtes pour l’entreprise en toute confiance.
Explorer des études de casIndustrie
Développement de logiciels
75% Réduction des coûts
50% Développement plus rapide
Industrie
Services publics (pétrole et gaz)
450+ heures économisées
Processus rationalisés et heures d’effort de développement économisées.
Fonctionnalités avancées et flexibles
Utilisateurs autonomisés grâce à une fonctionnalité robuste et polyvalente.
Industrie
Logiciel et technologie
1000+ heures économisées
Développement accéléré grâce à des composants d’interface utilisateur prêts pour l’entreprise.
Gestion de fichiers efficace
Flux de travail rationalisés grâce à des bibliothèques de documents, sans les construire à partir de zéro.
Industrie
Logiciel et technologie
2 ans de retard évité
Deux ans de retards évités grâce à une planification proactive.
Livraison à temps
Projets livrés dans les délais à l’aide de contrôles fiables.
Industrie
Services informatiques et conseil en TI
Performances améliorées
Grands ensembles de données gérés avec une personnalisation aisée et un débogage rapide.
Hautement personnalisable
Contrôles plug-and-play avec intégration rapide de modèles.
Industrie
Services professionnels
Accès instantané
Disponibilité rapide des fonctionnalités et des ressources.
Dépendances réduites
Moins de dépendances pour un développement plus rapide.
Evalue par des utilisateurs du monde entier.
Ressources pour Angular Tree Grid de Syncfusion
Kits UI
Téléchargement Figma
Téléchargement Figma
Recompenses
L’excellence—c’est une chose de l’affirmer, mais cela signifie davantage lorsque les autres la reconnaissent. Syncfusion® est fier de détenir les récompenses de l'industrie suivantes.
