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 >
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;
}
}
}
< 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 >
< 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;
}
}
}
}
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.
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
Les commentaires sont désactivés en mode aperçu
Source link