JavaScript Tree Grid - Table arbre HTML5 haute perf
- Chargez de grandes quantités de données en chargeant dynamiquement les éléments enfants à la demande.
- Inclut des interactions flexibles : expansion et réduction des parents, édition via boîte de dialogue et plus encore.
- Apparence HTML5 attrayante avec des thèmes intégrés tels que Fabric, Bootstrap, etc.
Trusted by the world’s leading companies
Vue d’ensemble
Le JavaScript TreeGrid est un composant riche en fonctionnalités, utilisé pour visualiser efficacement des données hiérarchiques autoréférentielles dans un format tabulaire (structure en arbre). Son ensemble complet de fonctionnalités inclut : la liaison de données, la virtualisation, l’édition, le tri, la recherche, le filtrage, le défilement infini, la pagination, les lignes et colonnes figées, l’exportation vers plusieurs formats, l’agrégation de lignes, et bien plus.
Pourquoi Syncfusion Essential Studio® JavaScript Tree Grid ?
Haute performance
Affichez les données de façon hiérarchique : son architecture optimisée offre de hautes performances et permet de charger des millions d’enregistrements en quelques secondes.
Liaison de données fluide
Liez les données de manière transparente avec diverses sources de données locales et distantes telles que JSON, OData, WCF et les services Web RESTful, à l’aide d’un gestionnaire de données.
Grille hiérarchique autoréférentielle
Le JavaScript Tree Grid est conçu pour visualiser des données autoréférentielles et hiérarchiques dans un format tabulaire. Il met ainsi en évidence les relations entre enregistrements parents et enfants.
Édition flexible
Le JavaScript Tree Grid prend en charge les opérations de création, lecture, mise à jour et suppression (CRUD) avec des données observables. Il permet d’éditer des collections JSON ou des données provenant d’un service distant via le gestionnaire de données.
S’adapte à toutes les résolutions
Le JavaScript Tree Grid propose une mise en page hautement réactive et un design optimisé pour ordinateurs de bureau, écrans tactiles et smartphones. Il fonctionne correctement sur les appareils iOS, Android et Windows.
Créez vos propres templates
Grâce aux templates, les utilisateurs peuvent créer une interface personnalisée dans le JavaScript Tree Grid selon les besoins de leur application, en utilisant une large gamme d’options de template.
Thèmes personnalisables attrayants
Design moderne avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, etc. Utilisez l’outil Theme Studio en ligne pour personnaliser facilement les thèmes du Tree Grid.
Globalisation et localisation
Permet aux utilisateurs de différents paramètres régionaux d’utiliser le Tree Grid en formatant les dates, les devises et les nombres selon leurs préférences.
Exemple de code JavaScript pour Tree Grid
Démarrez facilement avec le JavaScript Tree Grid en quelques lignes de HTML et de TypeScript, comme illustré ci-dessous. Consultez également notre Exemple JavaScript Tree Grid pour voir comment rendre et configurer un TreeGrid en JavaScript.
<div class="control-section">
<div class="content-wrapper">
<div id="TreeGrid">
</div>
</div>
</div>import { TreeGrid, Page } from '@syncfusion/ej2-treegrid';
import { sampleData } from './data-source';
/**
* Exemple TreeGrid par défaut
*/
TreeGrid.Inject(Page);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
height: 350,
treeColumnIndex: 1,
allowPaging: true,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
{ field: 'priority', headerText: 'Priority', width: 90 }
]
});
treegrid.appendTo('#TreeGrid');
Indicateur de chargement
Le Tree Grid affiche un effet de shimmer comme indicateur de chargement lors de la récupération des données et de leur liaison à la grille pendant le rendu initial, le rafraîchissement ou après des actions telles que le tri et le filtrage. Le Tree Grid propose deux types d’effets : spinner et shimmer.
Mise en page adaptative
L’interface du JavaScript Tree Grid est adaptée et repensée pour offrir une excellente lisibilité et ergonomie sur les petits écrans. Les dialogues de filtrage, de recherche et d’édition s’ajustent à la taille de l’écran.
Colonnes
Les colonnes définissent le schéma d’une source de données dans le JavaScript Tree Grid. Les fonctionnalités incluent le formatage, la définition des colonnes, l’habillage du texte, le sélecteur de colonnes, le menu de colonne, le réordonnancement des colonnes, et d’autres options importantes.
Pagination
La pagination permet d’afficher un segment de données provenant de la source assignée. Le JavaScript Tree Grid propose une interface de pagination intégrée avec des options de personnalisation et un mode de pagination à la demande pour récupérer efficacement des données depuis des services web distants.
Tri
Le JavaScript Tree Grid permet de trier une colonne en cliquant sur son en-tête. Un clic sur l’en-tête avec la touche Ctrl permet le tri multi-colonnes. Les données peuvent être triées en ordre croissant ou décroissant.
Filtrage
Le filtrage permet d’afficher des enregistrements spécifiques ou connexes correspondant à un critère donné. Il prend en charge plusieurs types de filtres, y compris un filtre puissant de type Excel. Le filtrage dans le JavaScript Tree Grid permet de choisir le type de filtre approprié, de définir une logique de filtrage personnalisée et de personnaliser l’interface de filtrage selon les besoins de l’application. Il est possible de définir le filtrage en tenant compte des relations parents-enfants.
Sélection
Le Tree Grid permet de sélectionner des lignes ou des cellules. Une ou plusieurs lignes ou cellules peuvent être sélectionnées en maintenant Ctrl ou Command, ou de manière programmatique.
Lignes
Les lignes du Tree Grid représentent chaque objet de données provenant de la source. Elles prennent en charge l’expansion/la réduction des lignes enfants, le réordonnancement des lignes, l’indentation/désindentation pour modifier les niveaux de hiérarchie, et bien d’autres fonctionnalités.
Édition
Le JavaScript TreeGrid offre un support complet pour les opérations de création, lecture, mise à jour et suppression (CRUD). Outre les composants d’éditeur intégrés pour modifier une valeur de colonne, le support des templates permet de créer des éditeurs personnalisés adaptés aux besoins de l’application. Les opérations d’édition peuvent s’effectuer sur des collections JSON ou via un service distant avec l’aide du gestionnaire de données.
Glisser-déposer des lignes
Le JavaScript TreeGrid permet de glisser-déposer des lignes au sein d’une même grille ou entre plusieurs grilles. Cette fonctionnalité est utile pour réorganiser les données et offrir une expérience utilisateur plus intuitive.
Agrégation
Les agrégats pour les valeurs de colonnes peuvent être affichés facilement grâce à la fonctionnalité d’agrégation. Les agrégats peuvent être personnalisés pour montrer leur valeur à chaque niveau de la hiérarchie à l’aide de types de résumé prédéfinis.
Colonnes figées
Les colonnes figées sont visibles à gauche, à droite ou des deux côtés du Tree Grid et rendent le reste du contenu défilable. Elles sont principalement utilisées pour comparer des valeurs de cellules.
Recherche
Vous pouvez rechercher des enregistrements en utilisant la méthode de recherche. Intégrez une zone de recherche dans la barre d’outils du TreeGrid en ajoutant des éléments de recherche.
Info-bulle personnalisée
Le composant Tree Grid permet de définir des info-bulles pour les cellules de la grille. Survolez les nœuds de l’arbre pour afficher le texte de l’info-bulle.
Exportation
Exporter vers Excel, PDF, CSV
Exportez facilement le contrôle HTML5 Tree Grid vers différents formats (Excel, PDF, CSV). Les utilisateurs peuvent également personnaliser le document exporté par programmation.
Impression
Les utilisateurs peuvent imprimer les données via l’option d’impression de la barre d’outils ou de manière programmatique. Imprimez toutes les lignes d’un Tree Grid, quel que soit le nombre de pages, ou bien imprimez uniquement la page visible.
Fonctionnalités supplémentaires
Hauteur des lignes
La hauteur des lignes est un élément important lors de l’affichage du nombre d’enregistrements dans la zone visible. Elle est facilement personnalisable selon les besoins de l’interface et peut être définie de façon conditionnelle.
Copier au presse‑papiers
Le presse-papiers permet de copier les données des lignes ou cellules sélectionnées. Utilisez Ctrl+C ou Ctrl+Shift+H pour copier les données avec ou sans en-têtes.
Menu contextuel
Le menu contextuel améliore les actions utilisateur dans le JavaScript Tree Grid via un menu popup. Il s’affiche lors d’un clic droit sur une cellule, un en-tête ou le pager. En plus des éléments par défaut, il est possible d’ajouter des éléments personnalisés.
Largeur et hauteur
Permet de modifier la taille du Tree Grid en définissant les propriétés de largeur et de hauteur. Des barres de défilement horizontales et verticales apparaissent lorsque le contenu déborde. Pour que le Tree Grid remplisse son conteneur parent, définissez largeur et hauteur à 100%.
En-têtes empilés
Les en-têtes empilés permettent de grouper et d’afficher 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. Toutes les actions du Tree Grid restent disponibles même lorsque les colonnes sont empilées.
Accessibilité
Navigation au clavier
Le Tree Grid HTML5 garantit que chaque cellule est accessible au clavier. Les principales actions (développer/réduire les lignes enfants, trier, sélectionner, éditer) peuvent être effectuées au clavier sans souris, facilitant la création d’applications accessibles.
Lecteurs d’écran
Le JavaScript Tree Grid offre un support complet WAI-ARIA. Son interface inclut des éléments visuels à fort contraste pour améliorer l’expérience des personnes malvoyantes. Les descriptions d’interface valides sont également accessibles via les technologies d’assistance telles que les lecteurs d’écran.
De droite à gauche (RTL)
Le rendu de droite à gauche permet d’afficher le texte et la mise en page du Tree Grid de droite a gauche, améliorant l’expérience pour les langues RTL.
Autres frameworks pris en charge
Le Tree Grid est disponible pour les frameworks Blazor, React, Angular et Vue. Explorez les options spécifiques à chaque plateforme via les liens suivants :
Navigateurs pris en charge
Le JavaScript Tree Grid fonctionne correctement avec tous les navigateurs modernes, notamment Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier JavaScript Tree Grid ? Notre documentation peut vous aider.
Je voudrais le lire maintenantPlus de 155+ contrôles d'interface utilisateur JavaScript
TOUS LES CONTROLES
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® JavaScript Tree Grid ?
Le JavaScript TreeGrid, riche en fonctionnalités, propose :
Charger de grandes quantités de données en chargeant dynamiquement les données enfants à la demande.
Inclure des interactions UI flexibles comme l’expansion et la réduction des enregistrements parents, l’édition par dialogue, etc.
Liaison de données flexible (data binding) avec prise en charge de sources locales et distantes (JSON, services RESTful, OData, WCF).
- L’un des meilleurs Tree Grids JavaScript du marché offrant une interface riche en fonctionnalités.
- Apparence attractive avec des thèmes intégrés tels que Fabric, Bootstrap, etc.
Configuration simple et API.
- Compatible avec tous les navigateurs modernes.
- Optimisé pour le tactile mobile et réactif.
Ressources d’apprentissage étendues : démos et documentation pour démarrer rapidement.
Où trouver la démo du JavaScript Tree Grid ?
Consultez notre JavaScript TreeGrid demo pour voir comment rendre et configurer le Tree Grid.
Puis-je télécharger et utiliser gratuitement le JavaScript Tree Grid ?
Non, il s’agit d’un produit commercial nécessitant une licence payante. Toutefois, une licence communautaire gratuite est disponible pour les entreprises et individus dont l’organisation réalise moins d’1 million USD de chiffre d’affaires annuel et compte cinq développeurs ou moins.
Comment démarrer avec le JavaScript Tree Grid ?
Un bon point de départ est notre documentation complète Bien démarrer.
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.
Light and fast
I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version
Alexis A,
Software Architect
Syncfusion - Great controls and terrific support
The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It’s priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.
David B,
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 JavaScript Tree Grid de Syncfusion
Support technique
Contacter le support
Forums communautaires
Demandes fonctions & rapports de bogues
Contacter le support
Forums communautaires
Demandes fonctions & rapports de bogues
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.
