août 9, 2018

Comment utiliser un composant d'interface utilisateur de la grille jQuery

Apprenez à utiliser les fonctions d'édition du composant de grille de l'interface utilisateur Kendo, notamment les modes d'édition incell, inline et popup.

Dans mon précédent article sur la grille vous avez appris à créer un Grille dans Interface utilisateur de Kendo à partir d'une table existante et comment en créer une à partir d'une source de données. Nous allons continuer là où nous en étions et explorer d’autres fonctionnalités du composant Grid . Plus précisément, nous examinerons comment modifier les données.

La possibilité de manipuler les données dans une grille est une des principales différences entre ce composant et les composants de table présents dans d'autres thèmes. Si des utilisateurs doivent gérer vos données, l'utilisation d'une grille fournit une interface conviviale à votre base de données. Au lieu d'interroger directement la base de données, les modifications peuvent être effectuées avec un point et un clic. Il est possible de créer des applications Web complètes basées uniquement sur cette fonctionnalité. Si vous avez déjà utilisé un service de base de données hébergé, il est probable que vous ayez fourni une grille de données pour gérer vos données. Dans cet article, vous apprendrez à personnaliser les différents modes et méthodes de modification du composant Grid .

Modification de Incell

Il existe trois modes de modification que vous pouvez configurer pour éditer les données dans Grille . Le mode par défaut est incell . Cela permet aux utilisateurs d'activer la modification en appuyant sur une cellule de tableau. C'est le moyen le moins restrictif de mettre à jour vos données. Vous pouvez utiliser cette option lorsque le champ ne contient pas d'informations critiques telles qu'un champ de commentaire. Pour activer ce mode, définissez l'option modifiable sur true ou incell . Ceci est une grille en mode de montage :

Exemple de grille d'interface utilisateur Kendo




   Grille

À l'aide du edit () écouteur d'événement, vous pouvez capturer lorsque des modifications sont apportées à la cellule de tableau. Vous pouvez l'utiliser pour accéder au modèle de données ou à l'élément conteneur de la cellule.

 $ ('# grid'). KendoGrid ({
  edit: fonction (e) {
    console.log (e.model);
  }
});

Modification en ligne

Si vous ne souhaitez pas que les utilisateurs puissent modifier facilement les données, vous pouvez utiliser le mode en ligne . Dans ce mode, les utilisateurs doivent cliquer sur un bouton pour activer la modification et confirmer les modifications. Vous pouvez également choisir d’annuler les modifications et aucune des modifications ne sera enregistrée. Cela garantit que les modifications apportées sont intentionnelles et non accidentelles. Si vous envisagez d'utiliser le mode en ligne vous devez également définir l'option dans les paramètres. L'option est une colonne semblable à vos autres colonnes. À l'exception de la liaison à vos champs de données, il contient les commandes pour manipuler votre table.

Exemple de grille d'interface utilisateur Kendo

 $ ('# grid'). KendoGrid ({
  éditable: 'inline',
  colonnes: [
    { command: 'edit' },
    { field: 'first', title: 'First Name' },
    { field: 'last',  title: 'Last Name' }, 
    { field: 'city',  title: 'City' }
  ]
});

Notez qu'il existe maintenant un bouton de mise à jour et d'annulation à la place du bouton d'édition. Les données d'événement renverront également la ligne entière de la table. Pour gérer l'événement lorsque vous cliquez sur update utilisez le programme d'écoute d'événement save () . Cela peut être utilisé lorsque vous souhaitez afficher un message de confirmation pour l'utilisateur.

Lors de la création d'une grille modifiable, il est important de définir le schéma afin d'éviter toute erreur lors des modifications. Au minimum, vous devrez définir le champ id dans le modèle du schéma. Voici un exemple de configuration pour le schéma:

 dataSource: {
  données: [
    // removed for brevity
  ],
  schéma: {
    modèle: {
      J'ai fait',
      des champs: {
        id: {type: 'number'},
        d'abord: {validation: {requis: true}},
        dernier: {validation: {requis: true}},
        ville: {validation: {requis: vrai}}
      }
    }
  }
}

D'autres paramètres que vous pouvez ajouter aux champs incluent une valeur par défaut, si celle-ci est modifiable ou nullable.

Le dernier mode, popup oblige également l'utilisateur à Cliquez sur un bouton d'édition, sauf que les modifications sont effectuées dans une fenêtre modale. L'utilisation d'une fenêtre contextuelle concentre l'attention de l'utilisateur sur le formulaire et l'empêche de faire autre chose sur la page. Une fenêtre contextuelle peut également être plus facile pour vos utilisateurs pour mettre à jour les données car vous utilisez mieux l'espace. Lorsqu'il y a beaucoup de champs, les informations sont mieux organisées sous forme de formulaire. Voici le tableau dans le mode popup :

Exemple de grille du Kendo UI

 $ ('# grid'). KendoGrid ({
  éditable: 'popup'
});

Si vous voulez faire quelque chose sur votre grille autre que la création, la mise à jour, la lecture ou la destruction de données, vous pouvez créer une commande personnalisée. Les options de configuration d'une commande incluent la définition du texte, de la classe d'icônes et du modèle. Cet exemple ajoute une icône de copie à la colonne de commande qui, lorsqu'elle est cliquée, imprime l'élément de données auquel elle appartient:

 colonnes: [{
  commander:[{
    nom: 'copie',
    template: '',
    cliquez sur: fonction (e) {
      e.preventDefault ();
      var tr = $ (e.target) .closest ("tr");
      var data = this.dataItem (tr);
      console.log (données);
    }
  }]
}]

Pour que le gestionnaire de clic fonctionne, une classe portant le nom k-grid- [command] doit être incluse dans le modèle où [command] est remplacé par la valeur des commandes '

Réflexions finales

Dans les exemples présentés, nous avons utilisé une source de données locale pour construire notre grille. Cependant, ce n’est pas une amélioration majeure par rapport à la création d’une grille à partir d’un tableau HTML. Pour tirer pleinement parti de ce composant, vous devez essayer de lier la grille à un service de données distant. Vous pouvez effectuer des opérations CRUD sur vos données en ajoutant simplement une URL à l'objet de transport dataSource . Cela vous permet non seulement d’écrire vos propres gestionnaires de requêtes personnalisés, mais aussi de créer des applications à grande échelle. Les applications Web telles que les logiciels de gestion de la relation client et de gestion des stocks, les clients de messagerie et les listes de lecture multimédias peuvent être créées à l'aide du composant Grille . Dans le prochain article, vous apprendrez comment.

Essayez la grille pour vous-même

Vous voulez commencer à profiter de la interface utilisateur Kendo jQuery Grid ou de l'un des 70 autres modèles prêts à l'emploi Les composants du Kendo UI, comme le Graphiques ou Scheduler ? Vous pouvez commencer un essai gratuit de l'interface utilisateur Kendo aujourd'hui et commencer à développer vos applications plus rapidement.

Blog ARC Optimizer

août 9, 2018

Comment utiliser un composant d'interface utilisateur de la grille jQuery

Modification de Incell

Modification en ligne

Réflexions finales

Essayez la grille pour vous-même

Articles similaires

Blog ARC Optimizer

Modification de Incell

Modification en ligne

Édition dans Popup

Réflexions finales

Essayez la grille pour vous-même

Versions angulaires, réactives et vues

Partager :

Articles similaires