L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment construire une table de données éditable en temps réel dans Vue.js
Bien que de nombreuses bibliothèques facilitent l'ajout d'un tableau de données à une application Vue, l'interface utilisateur Kendo pour Vue facilite grandement le rendu des données et du style. Continuez à lire pendant que nous construisons une table de données éditable en temps réel avec Kendo UI pour Vue et Hamoni Sync
La création d'applications Vue réactives devient encore meilleure et plus rapide avec Kendo UI pour Vue . Kendo UI for Vue est une bibliothèque avec un ensemble de composants d'interface utilisateur que vous pouvez utiliser dans vos applications Vue pour les rendre esthétiques, réactifs et accessibles. L'un des composants fourni avec Kendo UI for Vue est le composant Grid. La grille est utilisée pour afficher les données sous forme de tableau. Il vous permet non seulement d'afficher les données sous forme de tableau, mais offre également les fonctionnalités suivantes:
- Pagination
- Tri
- Filtrage
- Regroupement
- Édition
- Redimensionnement et réorganisation de colonnes [19659004] En-têtes multi-colonnes
- Défilement virtuel
- Mondialisation / Localisation
- Exporter en PDF et Excel
Montre-moi du code!
Après tout, je vais vous montrer comment utiliser le composant Grid en construisant une petite application qui vous permet d'ajouter et de modifier des données dans une grille en temps réel. Nous utiliserons Hamoni Sync pour la synchronisation en temps réel et Vue CLI pour amorcer le projet. Voici un aperçu de ce que vous allez construire:
Commençons par la création d’un projet Vue. Ouvrez la ligne de commande et exécutez vue, créez la commande kendo-realtime-vue-grid && cd. Kendo-realtime-vue-grid sélectionnez l'option par défaut et appuyez sur Entrée. Dans un court laps de temps, un projet Vue sera démarré par le CLI de Vue. Une fois le projet prêt, nous allons installer les dépendances nécessaires au projet. Exécutez la commande npm suivante pour installer les dépendances pour Kendo Vue et Hamoni Sync.
npm install --save @ progress / kendo-theme-material @ progress / kendo-vue-grid @ progress / kendo- vue-intl vue-classe-composante hamoni-sync
Nous avons installé le thème de conception Material pour Kendo UI, le package Kendo Vue Grid et Hamoni Sync.
Commençons avec du code. Ouvrez App.vue et supprimez la section de style. Mettez à jour la section de modèle avec l'extrait suivant:
< modèle >
< div >
< Grille
ref = [19659022] " grid "
: éléments de données = " gridData "
: edit-field = " ' inEdit ' "
@edit = " edit "
] @remove = " remove "
@save = " économisez " [
@ cancel = " cancel "
@itemchange = " itemChange "
: colonnes [19659027] = " colonnes "
>
< GridToolbar >
< bouton titre = " Ajouter nouveau " class = " k-button k-primaire " @click = " insert " >
Ajouter nouveau
</ button >
< button
v-if = " aItemsInEdit "
= " Les modifications actuelles "
sont classées dans la classe = ". K-button "
@ click = " cancelChanges "
>
Annuler les modifications actuelles
</ button >
</ GridToolbar <19659025] </ Grid >
</ div ]>
</ modèle >
Nous avons utilisé un composant Grid qui représente le tableau de données, et lui avons transmis quelques accessoires. Les accessoires contiennent les données de la grille, les colonnes définissent les propriétés des colonnes qui seront utilisées et le champ d'édition est utilisé pour déterminer si l'enregistrement en cours est en mode édition. Nous avons choisi d'utiliser inEdit comme nom de champ à utiliser pour déterminer quel enregistrement est en cours de modification. Nous allons créer une méthode calculée appelée hasItemsInEdit qui renvoie une valeur booléenne et est utilisée dans le composant GridToolbar de Kendo. Si cela retourne vrai, nous montrons un bouton qui permet d’annuler l’opération d’édition; sinon, il affiche un bouton pour déclencher l'ajout de nouvelles données. L'événement edit est déclenché lorsque l'utilisateur déclenche une opération d'édition, l'événement remove pour la suppression d'enregistrements et l'événement itemchange pour le moment où les données changent en mode édition.
Dans la section du script, ajoutez les instructions d'importation suivantes:
import Vue de "vue" ;
import "@ progress / kendo-theme -material / dist / all.css ";
import { Grille GridToolbar } de " @ progress / kendo- vue-grid ";
import Hamoni de " hamoni-sync ";
import de DropDownCell à partir de " ./ components / DropDownCell.vue ";
import CommandCell de " ./ components / CommandCell.vue ";
Vue . composant ( "kendo-dropdown-cell" de DropDownCell ) ;
Vue . composant ( "kendo-command-cell" CommandCell ) ;
const primitiveName = "grille de kendo" ;
Dans le code ci-dessus, nous avons les grilles et de GridToolbar de Kendo Vue Grid, ainsi que de Hamoni (nous y reviendrons plus tard). Les composants DropDownCell et CommandCell seront ajoutés ultérieurement. Une des colonnes aura besoin d’un menu déroulant lorsqu’elle sera en mode édition. Le DropDownCell sera donc utilisé pour restituer cette cellule. CommandCell sera utilisé pour afficher les boutons permettant de déclencher les modifications ou d'annuler les modifications en mode édition.
Ensuite, mettez à jour l'objet exporté afin qu'il ressemble à ce qui suit:
export default {
nom : "app"
composants : {
Grille
GridToolbar
}
données : fonction () {
return {
colonnes : [
{ champ : "ProductID" éditable : false . titre : "ID" largeur : "50px" }
{ champ : : [19659100] "NomProduit" titre : "Nom" }
{
champ : "Premier ordre"
éditeur : "date"
titre : "Premier ordre"
format : "{0: d}"
}
{
champ : "UnitsInStock"
titre : "Unités"
largeur : "150 pixels"
éditeur : "numérique"
}
{
champ : "Discontinued"
titre : "Discontinued"
cellule : "cellule de kendo"
}
{ cellule : de "cellule de kendo" largeur : "180px" }
]
gridData : []
} ;
}
monté : fonction asynchrone () {
const accountId = "YOUR_ACCOUNT_ID" ;
; const
appId = "YOUR_APP_ID" ;
laissez hamoni ;
const réponse = à attendre fetch ( "https://api.sync.hamoni.tech/v1/token" {
méthode : "POST"
en-têtes : {
"Content-Type" : "application / json; charset = utf-8"
}
corps : JSON . stringify ( { accountId appId ] )
} [1965922] 19659022]) ;
const token = wait réponse . json () ;
hamoni = new Hamoni ( jeton ) ;
wait hamoni . connectez-vous ([19659022]) ;
try {
const primitive = wait hamoni . get () primitiveName ) ;
ceci . listPrimitive = primitive ;
cette . gridData . 19659106] [ ... primitive . getAll () ;
ceci . . subscribeToUpdate [19659022] () ;
} capture ( erreur ) {
si ( erreur
erreur [1965922]. === "Erreur lors de l'obtention de l'état du serveur" ) ce . initialise ( hamoni ) ;
else alerte ( erreur ) ;
}
}
calculé : {
hasItemsInEdit () {
a retourné ce . gridData . . 19659022] ( p => p . inEdit ) . longueur > 0 ;
]}
}
} ;
Dans le code ci-dessus, nous avons déclaré les données des colonnes et défini gridData sur un tableau vide. Nos données réelles proviendront de Hamoni Sync, que nous avons créé à partir du hook cycle de vie monté. Hamoni Sync est un service qui vous permet de stocker et de synchroniser l’état des données / applications en temps réel. Cela nous permettra de stocker les données de la table de données et d’obtenir une mise à jour en temps réel lorsqu’un enregistrement est modifié. Vous devrez remplacer YOUR_APP_ID et YOUR_ACCOUNT_ID de la fonction montée par les détails de votre compte Hamoni Sync. Suivez ces étapes pour créer un compte et créer une application sur le serveur Hamoni.
- Inscrivez-vous et connectez-vous au tableau de bord Hamoni .
- Entrez le nom de votre application préférée dans le champ de texte, puis cliquez sur le bouton Créer. . Cela devrait créer l'application et l'afficher dans la section de la liste des applications.
- Développez la carte Account ID pour obtenir votre identifiant de compte.
Hamoni Sync a ce qu'on appelle Synchroniser les primitives comme moyen de stocker et de modifier un état. Il existe trois types de primitives Sync: les primitives Value, Object et List. Nous allons utiliser la primitive List car elle fournit une API permettant de stocker et de modifier les données devant être stockées comme un tableau. Vous pouvez en savoir plus sur les primitives de synchronisation dans les documents .
Dans le dernier code que vous avez ajouté, une ligne appelle hamoni.connect () pour vous connecter au serveur dès que vous le souhaitez. 'ai eu un jeton. Bien que nous ayons le code pour extraire le jeton, il est recommandé de le placer derrière un serveur que vous contrôlez et de ne renvoyer un jeton qu’à partir d’un noeud final que vous contrôlez. Ceci afin d'éviter de donner votre identifiant de compte au public. Pour obtenir ou stocker des données, vous devez d’abord obtenir un objet représentant la primitive de synchronisation que vous souhaitez utiliser. C'est pourquoi nous avons appelé hamoni.get () en lui donnant le nom de l'état auquel nous voulons accéder. S'il existe, nous obtenons un objet avec lequel nous pouvons manipuler l'état sur Hamoni.
La première fois que nous utiliserons l’application, la primitive de synchronisation n’existera pas; C'est pourquoi dans le bloc catch, nous appelons initialise () pour créer une primitive de synchronisation avec des données par défaut. S'il existe, appelez primitive.getAll () pour obtenir des données et affectez-les à gridData afin que la grille obtienne des données à afficher. Nous ajouterons plus tard l'implémentation de subscribeToUpdate () qui sera utilisée pour s'abonner aux événements de mises à jour de données provenant de Hamoni Sync.
Nous avons référencé des méthodes jusqu'à présent du modèle et du code dans le hook monté. . Ajouter le code ci-dessous après la propriété calculée
méthodes : {
itemChange : function ( e ) {
Vue . set ( e . dataItem et
Source link