L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment utiliser un composant de l'interface utilisateur de la grille jQuery dans votre application Web
Découvrez comment utiliser la grille de données Kendo UI pour fournir de puissantes fonctionnalités de visualisation, de manipulation et de modification des données tabulaires dans votre application.
Dans les prochains épisodes, nous allons jeter un coup d'œil à la composante de grille d'UI de Kendo . La grille est une table qui vous permet de naviguer et d'éditer des ensembles de données. L'ensemble de données peut être des informations sur les clients ou des stocks pour un magasin ou des dossiers financiers.
Il est important de noter qu'il s'agit d'une grille de données sophistiquée et non d'une grille de mise en page. Les grilles comme la grille Bootstrap sont idéales pour la mise en page, mais pas très bonnes pour les données. La grille d'interface utilisateur de Kendo fournit des fonctionnalités sophistiquées telles que le tri, le filtrage, la hiérarchie, l'importation de données, l'impression depuis la grille, l'exportation vers Excel, etc. Il y a plus de 100 paramètres différents qui peuvent être utilisés pour contrôler le comportement de la grille, et bien que nous ne les couvrons pas tous ici, nous allons vous donner un avant-goût de la puissance de la grille UI Kendo et montrer certaines des caractéristiques les plus importantes
Grille de l'interface utilisateur de Kendo basique
Le moyen le plus simple de créer une grille d'interface utilisateur de Kendo est de commencer par une table HTML régulière, puis d'y ajouter la grille d'interface utilisateur de Kendo. Nous allons couvrir la création d'une grille d'UI Kendo à partir de zéro sans utiliser de table HTML après cela, mais nous allons d'abord regarder l'approche "ajouter". Il est peu probable que vous utilisiez l'approche de table HTML pour une nouvelle application, mais vous pouvez avoir des applications existantes qui utilisent des tables et vous souhaitez simplement ajouter la fonctionnalité supplémentaire que la grille UI Kendo peut fournir sans réécrire l'application entière. 19659006] L'élément thead définit les en-têtes de colonne et l'élément tbody définit le contenu de la table. Les lignes sont définies avec un élément tr . Un élément est une cellule à l'intérieur de l'en-tête de colonne et un élément td est une cellule à l'intérieur du corps de la table. Sans aucun style, la table met en gras les en-têtes de colonne et positionne les cellules du tableau en ligne avec les colonnes. Voici un exemple de tableau HTML qui n'a pas été stylé:
En utilisant la même table, vous pouvez créer un composant Grid qui sort de la boîte selon votre thème. L'en-tête a une couleur d'arrière-plan pour le distinguer du corps, les bordures sont ajoutées à des rangées séparées et il y a un style pour l'état hover. Voici un exemple de la table précédente initialisée en tant que grille d'interface utilisateur de Kendo:
`` `html
<méta charset = "utf-8" >
[1969017]
[1945901] [1945908]
[19659017] <table id = "grille" >
]
[19659049] Ville
[194] [1945902]
[196590BANQUEDEFRANCE66] Biche
[19659017]
$ (document) .ready ( fonction () { $ ([19659018] '# grille' ). KendoGrid (); }); [19659002] [1945906] `` ` Personnalisation du composant de grille [19659005] Passons maintenant à la façon de créer une grille directement à l'aide de la grille d'interface utilisateur de Kendo sans table HTML. Nous remplacerons l'élément
de la table par un div et les données seront configurées via les options colonnes et dataSource de l'API. Les colonnes peuvent être définies comme un tableau de chaînes qui relient les champs d'en-tête aux champs de la source de données. Dans ce cas, le nom du champ sera également utilisé comme titre de la colonne. Alternativement, le champ et le titre peuvent être définis séparément en tant qu'objet. Les données de nos lignes de table sont placées dans la source de données sous la forme d'un tableau d'objets. Voici le code mis à jour: `` `html <div id = " grille ">
$ (document) .ready () fonction () {
$ ( '# grille' ). kendoGrid ({ ]
colonnes: [
{ domaine: 'premier' titre: 'Prénom' },
{field: 'dernier' titre: 'Nom de famille' },
[field: 'ville' titre: 'Ville' }
]
donnéesource: [
{première: 'Jane' dernier: 'Doe' ville: 'New York' },
{première: 'John' dernier: 'Doe' ville: 'Boston' },
(première: 'Peter' dernier: 'Pan' ville: 'Neverland' }
]
});
});
`` `
Les champs de la grille peuvent également être édités en ajoutant l'option editable: true . Lorsque l'édition est activée, cliquer sur une cellule la convertira en champ de texte. Vous pouvez également activer le tri en ajoutant l'option sortable: true . Lorsque le tri est activé, en tapant sur l'en-tête, la table sera triée par cette colonne et en tapant à nouveau, l'ordre de tri sera inversé.
Conclusion
Une table organise une collection de données de manière à faciliter la compréhension et la navigation des informations par les utilisateurs. Cependant, le composant Kendo UI Grid est plus qu'une simple table. L'élément de table est statique. La grille est dynamique et interactive. Il est possible d'éditer des données, d'ajouter des données, de supprimer des données et de trier des données. Dans ce post, vous avez seulement vu un exemple d'édition des données lorsque sa cellule est tapée. Vous pouvez également utiliser un bouton en ligne pour modifier les enregistrements et les commandes de la barre d'outils pour modifier la table. Dans le prochain article, nous approfondirons les différentes façons de modifier votre grille.
Essayez la grille pour vous-même
Vous voulez commencer à profiter de la grille d'interface utilisateur de Kendo ou toute autre des 70 autres composants d'interface utilisateur Kendo prêts à l'emploi, comme les graphiques ou le planificateur? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.
Début de mon essai d'interface utilisateur de Kendo
Versions angulaires, de réaction et de vue
Vous recherchez un composant d'interface utilisateur pour prendre en charge des frameworks spécifiques? Découvrez la grille pour Angular la grille pour React ou la grille pour Vue .
Ressources
Les commentaires sont désactivés en mode aperçu.
Source link