Comment utiliser un composant d'interface utilisateur Vue Grid dans votre application Web (2e partie)

Dans la deuxième partie de ce guide, vous apprendrez à modifier une grille que vous avez créée avec la nouvelle grille native dans Kendo UI pour Vue.

Dans le dernier message nous avons vu comment initialiser. a Vue Native Grid avec Kendo UI à l'aide de données locales et distantes. Dans cet article, nous allons apprendre à mettre en œuvre certaines des fonctionnalités d'édition de Vue Native Grid. A l'aide du wrapper de grille, vous pouvez activer l'édition en configurant les propriétés modifiables et modifiables de la barre d'outils et le composant s'occupe de tout. Mais dans ce cas, nous sommes limités au comportement par défaut. À l'aide de la grille native, nous devons implémenter nous-mêmes la fonctionnalité pour permettre l'édition. Cela nous donne plus de contrôle sur le comportement du composant et nous permet de gérer toutes les interactions possibles sur la page. Nous verrons ensuite comment ajouter la possibilité de modifier des enregistrements en ligne et de créer de nouveaux enregistrements.

Mise en route

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, la grille et le GridToolbar dans notre fichier main.js . Nous avons besoin du composant GridToolbar pour la fonctionnalité d'ajout d'un nouvel enregistrement. Enfin, nous enregistrons les grilles et GridToolbar globalement. Vous trouverez ci-dessous le fichier main.js mis à jour.

 import Vue depuis 'vue'
importer l'application depuis './App.vue'
importer '@ progress / kendo-theme-default / dist / all.css'
importer {Grid, GridToolbar} à partir de '@ progress / kendo-vue-grid'

Vue.component ('Grille', Grille)
Vue.component ('grid-toolbar', GridToolbar)

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

Dans le fichier App.vue nous allons d'abord ajouter le composant Grid au modèle. Dans la composante, nous allons définir les propriétés de données de colonnes et de edit-field et ajouter les propriétés rowclick et . ] itemchange événements. Voici le modèle:

  < modèle > 
   < div   id  =  " app "  > 
     < Grille  :  style  = " { hauteur :   '240px' } pour le même modèle ]  "
          : data-items  = "  getData  "
          : colonnes  = "  colonnes  "[[19659030]: edit-field  =  " ' inEdit ' " 
           @rowclick  =  " rowClick  "
           @itemchange  = "  itemChange  " > 
     </  Grille > 
   </  div > 
 </  template >  

Nous avons besoin des propriétés des éléments de données et des colonnes pour construire la grille. Le champ d'édition est utilisé pour déterminer si l'enregistrement actuel est en mode édition. C'est le nom d'un champ dans nos données et la valeur est true ou false. Nous avons choisi le nom inEdit mais nos éléments de données n’ont pas de champ nommé inEdit nous devons donc lui en donner un. Nous allons créer une méthode calculée appelée getData qui attribue la propriété inEdit à tous les éléments de données. La valeur de inEdit est vraie si le editID est égal à personId . Le editID est l'identifiant de l'élément en mode édition. Voici le script jusqu'à présent:

  < script > 
 import  Vue  de   'vue' ; 
 var  people  =   [
   {
     "personId" :   0 
     "nom" :   "Ruxanda"  ]
     "nom de famille" :   "Corbea" 
     "genre" :   "femme" 
     "région" [19659014]:   "Roumanie" 
  } 
   {
     "personId" :   1 
     "nom" :   ] "Paula" 
     "nom de famille" :   "Acevedo" 
     "genre" :   "femme" 
     ] "région" :   "Mexique" 
  } 
   {
     "personId" :   2 
     "nom" :   "David" 
     "nom de famille" :   "Dediu" 
     " genre ":  " homme "
    " région ":  " Roumanie "
  } 
   {
    " personId " :   3 
     "nom" :   "Urmila" 
     "nom de famille" :   "Belbase" [19659014]
     "genre" :   "femme" 
     "région" :   "Népal" 
  } 
] ; 

 exportation   default   {
  nom :   'app' 
   données   ()   {
     retour   {
      gridData :  people 
      editID :   null 
      colonnes :   [
         { zone :   'personId'  titre :   'ID' } [ID19659014]
         { champ :   'nom' } 
         { champ :   'nom de famille'  } 
         { champ :   'sexe' } 
         { champ :   'région' ['19659061]} 
      ] 
    } ; 
  } 
  calculé :   {
     getData   ()   { 
       renvoie   ce .  gridData .  carte [19659014] ( ( item )   =>  Objet .  assign  ( { inEdit : . ] item .  personId  ==   this .  editID }  item ) ) [19659188]} 
  } 
} 
 </  script > 

Modification d'enregistrements

Pour permettre l'édition, nous devons gérer les événements rowclick et itemchange . L'événement rowclick se déclenche lorsqu'un utilisateur clique sur une ligne. Lorsque cet événement est déclenché, nous souhaitons mettre l’enregistrement en mode édition. Dans notre gestionnaire, nous allons définir l'édité editID égale à l'ID personne afin que inEdit devienne vrai. L'événement itemchange est déclenché lorsque l'utilisateur modifie la valeur d'un élément. Nous allons utiliser cet événement pour enregistrer nos modifications. Dans le gestionnaire, nous copions d'abord les éléments de données. Ensuite, nous trouvons l'index de l'élément en cours d'édition. Nous remplaçons l'élément de cet index par les nouvelles valeurs. Enfin, nous définissons notre source de données locale égale aux nouvelles données. Ceci est le rowclick et itemchange gestionnaires:

 export default
  ...
  méthodes: {
    rowClick (e) {
      this.editID = e.dataItem.personId;
    },
    itemChange (e) {
      const data = this.gridData.slice ();
      const index = data.findIndex (d => d.personId === e.dataItem.personId);
      data [index] = {... data [index][e.field]: e.value};
      this.gridData = data;
    }
  }
}

Ajout d'enregistrements

Ensuite, nous verrons comment ajouter de nouveaux enregistrements. Nous allons ajouter un bouton à la barre d'outils. Lorsque vous cliquez dessus, une nouvelle ligne sera ajoutée au début de la grille en mode édition. Lorsque la barre d'outils est cliquée, l'enregistrement sera sorti du mode édition. Tout d'abord, nous allons ajouter le modèle grid-toolbar à notre modèle existant. Voici le composant Grid mis à jour:

  < Grid  :  style  = " { height : [19659027] '240px' }   "
      : éléments de données  = "  getData  "
      : colonnes  =  ] " colonnes " 
      : edit-field  =  " ' inEdit ' " 
       @rowclick  =  " rowClick " 
       @itemchange  =  " itemChange "  > 
   < de la barre d'outils > 
     < div   @click  =  " closeEdit "  > 
       < bouton   ] titre  =  " Ajouter nouveau "    class  =  " k-bouton k-primaire "    @click  =  ' addRecord  '  > 
         Ajouter nouvelle
       </  button > 
     </  div > 
   </  la barre d’outils de la grille > 
 </  la grille >  

Nous allons ensuite implémenter les événements addRecord et closeEdit et les ajouter à notre liste de méthodes. Pour la méthode addRecord nous allons d'abord créer un nouvel enregistrement et l'initialiser avec un champ personId . Ensuite, nous copierons les données actuelles. Ensuite, nous ajoutons le nouvel enregistrement au début des données copiées. Ensuite, nous définissons notre source de données locale égale aux données mises à jour. Enfin, nous mettons l'enregistrement en mode édition en définissant editID égal à personId . Pour la méthode closeEdit nous faisons en sorte que le editID soit égal à null de sorte que l'enregistrement n'est plus en mode édition. Voici les deux méthodes ajoutées à notre script.

 export default {
  ...
  méthodes: {
    ...
    addRecord () {
      const newRecord = {personId: this.gridData.length}
      const data = this.gridData.slice ();
      data.unshift (newRecord);
      this.gridData = data;
      this.editID = newRecord.personId;
    },
    closeEdit (e) {
      if (e.target === e.currentTarget) {
        this.editID = null;
      }
    }
  }
}

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

Résumé

Nous avons vu comment modifier des éléments de données et créer de nouveaux éléments de données dans la grille. Il existe de nombreuses autres façons de personnaliser notre grille. Les éléments peuvent être modifiés en ligne ou dans une cellule. En plus de l'ajout et de la modification d'enregistrements, nous Au lieu de cliquer sur la barre d'outils pour fermer l'édition, nous pourrions ajouter des boutons pour enregistrer et annuler les modifications, créer un bouton d'édition pour activer le mode édition. Vous pouvez également utiliser des modèles pour créer des champs d'édition personnalisés. Ce ne sont là que quelques-unes des fonctionnalités que vous pouvez ajouter.

Ressources

Essayez vous-même l'interface utilisateur de Kendo

Vous souhaitez commencer à tirer parti de plus de 70 composants prédéfinis de Kendo UI, tels que Grid ou Vous pouvez commencer dès aujourd'hui à essayer gratuitement Kendo UI et commencer à développer vos applications plus rapidement.

Démarrer My Kendo UI Tri al

Versions angulaire, réactive et jQuery

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

Plus de ressources