Comment utiliser un composant d'interface utilisateur Vue Grid dans votre application Web (première partie)

Apprenons à créer une grille avec la nouvelle grille native dans Kendo UI pour Vue. La nouvelle grille native est construite avec Vue depuis le début.

Dans le premier article de cette série en deux parties, nous allons apprendre à créer une grille native pour Kendo UI pour Vue. La nouvelle grille native est construite avec Vue à partir de la base. Une des différences entre la grille native et le wrapper de grille est que la grille native ne dépend pas de jQuery. L'autre différence est que le composant DataSource n'est plus nécessaire pour charger des données. Les données peuvent être définies directement à l'intérieur du composant. À venir, nous verrons comment créer un réseau natif à l'aide de données locales et distantes. Nous ajouterons ensuite un pager à la grille pour scinder les données en pages.

Création de la grille

Nous allons tout d'abord initialiser notre projet à l'aide du modèle Vue webpack-simple . Dans le répertoire du projet, nous installerons un thème, la grille, le paquet de globalisation et le composant vue-class à l'aide des commandes suivantes:

 npm   install  --save @ progress / kendo-theme -défaut
 npm   installez  --save @ progress / kendo-vue-grid
 npm   installez  --save @ progress / kendo-vue-intl
 npm   installez  --save vue-class-component

Ensuite, nous importons le thème et la grille dans notre fichier main.js et enregistrons le composant de grille globalement.

 import  Vue  de   'vue' [19659013] import  App  de   './ App.vue' 
 import   '@ progress / kendo-theme-default / dist / all.css' 
 import   ] { Grille }   de   '@ progress / kendo-vue-grid' 

Vue .  composant  ( 'Grid'  Grid ) ; 

 nouveau   Vue  ( {
  el :   '# app' 
  render :  h  =>   h  ( App ) 
} ) 

Dans ce premier exemple, nous allons définir nos données localement. Les données sont fournies par uinames.com . Nous allons ajouter notre composant de grille au modèle dans le fichier App.vue et définir les propriétés des éléments de données et des colonnes . La propriété data-items définit les données de la grille. La propriété colonnes définit les champs de la grille. Ceci est le fichier App.vue mis à jour:

 < modèle > 
   < div   id  =  " app  " > 
     < Grille  :  style  ="  { hauteur :   '200px '}   "
          : éléments de données  = "  dataItems  "
          : colonnes  = "  colonnes  " > 
     </  Grille > 
   </  div > 
 </  modèle  ]> 

 < script > 

 export   défaut   {
  nom :   'app' 
   données   ()   {
     retour   {
      dataItems :   [
       {
         "name" :   "Ruxanda" 
         "nom de famille" :   "Corbea" [[19659022]
         "genre" :   "femme" 
         "région" :   "Roumanie" 
      } 
       {
         "nom" :   "Paula" 
         "nom de famille" :   "Acevedo" 
         "sexe"  :   "femme" 
         "région" :   "Mexique" 
      } 
       {
         "nom" : [19659012] "David" 
         "nom de famille" :   "Dediu" 
         "genre" :   "Dediu" 
        "sexe" :   19659082] "region" :   "Roumanie" 
      } 
       {
         "nom" :   "Urmila" 
         "nom" :   "Belbase" 
         "genre" :   "femme" 
         "région" [19659022]:   "Népal" 
      } ] 
      colonnes :   [
         { champ :   'nom' } 
         { champ :   'nom de famille' } 
         { champ :   'sexe' } 
         { champ : [19659012] 'region'  } 
      ] 
    }  
  } 
} 
 </  script > 

 <  style > 
 #app   {
   famille de polices :   'Avenir' Helvetica, Arial, sans-serif  ; 
   couleur :   # 2c3e50 ; 
   margin-top :   60  px ; 
} 
 </  style > 
 

En utilisant les mêmes données, nous allons construire un grille à partir d'une source de données distante. Nous commencerons par un dataItems tableau. Cette fois, nous allons utiliser axios pour récupérer les données d’une API. Ensuite, nous remplirons le tableau dataItems avec le résultat. L'appel de l'API aura lieu dans l'événement de cycle de vie monté . Nous allons d’abord installer axios avec la commande suivante:

 npm   install  --save axios

Ensuite, nous importons axios dans le script de notre fichier App.vue et nous chargeons les données à partir de l'événement de cycle de vie monté. Voici le script mis à jour:

 < script > 
 import  axios  de   'axios' 

 export   default   {
  nom :   'app' 
   données   ()   {
     retour   {
      articles de données :   [] 
      colonnes :   [
         { champ :   'nom' } 
         { champ :   'nom de famille' } 
         { champ :   'sexe' } 
         { champ : [19659012] 'region'  } 
      ] 
    } 
  } 
   monté   ()   {.
    axios
      .  get  ( 'https://uinames.com/api/?amount=25' ) 
      .  puis  ( response  =>   {
         this .  dataItems  =  réponse .  data
      } ) 
  } 
} 
 < /  script > 

Ajout de la radiomessagerie

Par défaut, tous les enregistrements de la grille montrer sur une page. Pour implémenter la pagination, nous devons configurer plusieurs propriétés. Nous devons définir les propriétés paginables sauter prendre et le total des propriétés de notre grille ainsi que la page ] un événement. La propriété pageable configure le pageur pour la grille. La propriété skip correspond au nombre d'enregistrements que le pager va ignorer. La propriété take est le nombre d'enregistrements à afficher pour chaque page. Le total est le nombre total d'éléments de données. Et pagechange est l'événement qui se déclenche lorsque la page est modifiée. Voici le modèle mis à jour:

 < modèle > 
   < div   id  =  " app "  [ 19659022]> 
     < Grille  :  style  = " { hauteur :   '200px' }. 19659022] "
          : data-items  = "  résultat  "
          : columns  = "  colonnes  "
           : pageable  =  " true " 
          : skip  =  " skip " 
          : prendre  = [19659022] " prendre " 
          : total  =  " total " 
           @pagechange  =  ""  page [...] ] ""  > 
     </  Grille > 
   </  div > 
 </  modèle >  ] 

La propriété data-items doit être définie sur les données de la page en cours. Pour ce faire, nous créons une méthode calculée nommée result qui calcule les enregistrements à prendre dans la liste des éléments de données. La propriété skip est initialisée à 0 et take à 10. Nous créons une méthode calculée pour total qui renvoie le nombre d'éléments de données. Enfin, nous ajoutons une méthode pageChange qui met à jour les propriétés de saut et de prendre . Voici le script mis à jour:

 < script > 
 import  axios  de   'axios' 

 export   default   { ]
  nom :   'app' 
   données   ()   {
     retour   {
      articles de données :   [] 
      colonnes :   [
         { champ :   'nom' } 
         { champ :   'nom de famille' } 
         { champ :   'sexe' } 
         { champ : [19659012] 'region'  } 
      ] 
      sauter :   0 
      prenez :   10 
    } 
  } 
  calculé :   {
     résultat   ()   {
         renvoyer   cette .  dataItems . . 19659022] ( ceci .  ignorer   ceci .  prendre  +   ceci .  ) 
    } 
     total   ()   {
       retourne   cette .  dataItems .  longueur
    } 
  } 
   monté   ()   {
    axios
      .  get  ( 'https://uinames.com/api/?amount=25' ) 
      .  puis  ( response  =>   {
         this .  dataItems  =  réponse .  data
      } ) 
  } 
  Méthodes :   {
     pageChange  ( événement )   {
         ce .  ignorer  =  événement .  page .  sauter ; 
         cette .  take  =  événement .  page  .  prenez ; 
    } 
  } 
} 
 </  script > 
 

Voir le rapport final du projet ici: https://github.com/albertaw/kendoui-vue-native-grid

Résumé [19659004] Tout d'abord, nous avons vu comment créer une grille à l'aide de données locales: il fallait définir la propriété data-items égale à une liste définie dans les données et définir la propriété colonnes . nous avons créé la grille à partir d'une source de données distante en utilisant axios pour effectuer un appel d'API dans le cycle de vie de la vue de Vue montée NT. Enfin, nous avons ajouté la pagination à la grille. Nous devions définir les propriétés paginables sauter prendre et le total des propriétés et gérer l'événement [19459109].

Dans le prochain article, nous verrons comment modifier des enregistrements dans la grille.

Ressources

Essayez le Kendo UI pour vous-même

Vous souhaitez commencer à tirer parti des plus de 70 Kendo prêts à l'emploi Composants d'interface utilisateur, comme la grille ou le planificateur? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

Démarrer Mon essai de Kendo UI

Versions angulaire, réactionnelle et jQuery

Vous recherchez un composant d'interface utilisateur prenant en charge des cadres spécifiques? Vérifiez Kendo UI pour Angular KendoReact ou Kendo UI pour jQuery .

Ressources

---