modification de la grille de données jquery

Avec l'augmentation des applications Web, l'utilisation de la présentation visuelle des données est devenue un élément important des sites Web modernes. Par conséquent, les tableaux de données des sites Web modernes jouent un rôle essentiel dans leurs fonctions d’interaction utilisateur et de présentation des données. Afin de mieux réaliser l'affichage et l'interaction des tableaux de données, jQuery Datagrid a été développé.

jQuery Datagrid est un plug-in basé sur jQuery qui utilise HTML et CSS pour créer des tableaux de données et JavaScript pour contrôler son affichage et son interaction. Il fournit de nombreuses fonctions qui peuvent aider les développeurs à créer rapidement des tableaux de données puissants, tels que le filtrage, le tri, la pagination, le masquage de colonnes, etc.

Cependant, en développement réel, l'utilisation de jQuery Datagrid ne se limite pas seulement à l'affichage des données, mais nécessite également une modification des données en cours d'utilisation. Dans cet article, nous verrons comment utiliser jQuery Datagrid pour implémenter la modification des données.

1. Principe de base

Habituellement, la méthode de mise en œuvre de la modification de la grille de données peut être divisée en les étapes suivantes :

1.1 Recevoir les événements utilisateur

Chaque ligne d'une table de données contient un ensemble de données et la clé pour réaliser la modification des données. est Il s'agit de savoir comment obtenir l'opération de l'utilisateur sur la ligne de données. À ce stade, vous devez déclencher les événements correspondants en surveillant les opérations des utilisateurs, telles que les clics, les mouvements de souris et d'autres événements.

Dans jQuery, vous pouvez écouter les entrées de l'utilisateur et répondre via des événements JavaScript standard. Par exemple, nous pouvons écouter l'événement de clic de l'élément de table et déclencher la réponse à l'événement lorsque l'utilisateur clique sur la cellule.

1.2 Affichage des lignes de données

Comment afficher correctement les lignes de données sélectionnées dans Datagrid est une question importante. Avant d'implémenter la modification des données, vous devez vous assurer que les lignes sélectionnées s'affichent correctement dans le tableau.

Avec les méthodes API fournies par jQuery Datagrid, vous pouvez rapidement localiser une certaine ligne du tableau et afficher les données dans une cellule spécifique. Par exemple, les numéros de ligne peuvent être affichés dans les données du tableau via le paramètre rownumbers, et le code suivant est exécuté dans Datagrid :

datagrid({

rownumbers: true

});

1.3 Modification des données

La partie la plus critique est de savoir comment pour mettre en œuvre la modification des données. Lorsque l'utilisateur clique manuellement pour sélectionner une ligne de données dans le tableau, l'éditeur doit être ouvert sur cette ligne. Nous pouvons utiliser la méthode API de l'éditeur fournie par jQuery Datagrid pour activer l'éditeur dans le tableau. Par exemple, via les méthodes API de début d'édition (startEdit) et de fin d'édition (endEdit) de l'éditeur :

var editors = $('#dg').datagrid('getEditors', index);
if (editors && editors.length > 0) {

 editors[0].target.bind('keyup', function (event) {
     onKeyup(this.event, fildName)
 });

}

Parmi eux, getEditors est la méthode utilisée pour obtenir tous les éditeurs d'affilée.

1.4 Sauvegarde des données

Une fois que l'utilisateur modifie les données, les résultats doivent être enregistrés sur le serveur backend pour des raisons de persistance. Pour les opérations de données importantes, il est particulièrement nécessaire de garantir l’exactitude du stockage des données.

Les données modifiées doivent être envoyées au serveur d'une manière ou d'une autre pour enregistrer les données modifiées. Normalement, nous pouvons simplement soumettre les données modifiées au serveur en tant que paramètre de requête POST. Par exemple, utilisez l'interface de requête jQuery Ajax dans Datagrid pour recevoir de nouvelles données. Objet :

$(function(){

$(document).on('click', '#new', function(){

var data = {
  name: $("#name").val(),
};

$.ajax({
  type: "POST",
  url: "/add",  
  data: data,
  success: function(){
    $("#dg").datagrid("reload");
  }
});

}) ;

});

Notes

Lorsque vous utilisez jQuery Datagrid pour modifier des données, vous devez faire attention aux points suivants :

2.1 Vérification des données

Lorsque l'utilisateur modifie les données et clique sur Enregistrer, vous devez assurez-vous qu'elles sont transmises au backend. Les données sur le serveur final sont valides et répondent aux exigences.

Dans jQuery Datagrid, la vérification des données est complétée en définissant une fonction de vérification. Cette fonction doit renvoyer vrai ou faux pour indiquer si la vérification réussit.

Par exemple, avant de soumettre des données, vous devez confirmer si le nom d'utilisateur et le mot de passe sont conformes aux paramètres spécifiés du serveur :

fonction checkUserValues(rowIndex, changes) {

var userName = changes.userName;
var password = changes.password;

if (userName.length < 3) {
    alert('用户名称至少包含3个字符');
    return false;
}
if (password.length < 6) {
    alert('密码至少包含6个字符');
    return false;
}
return true;

}

Version du plug-in 2.2

En utilisant jQuery Datagrid pour la modification des données, vous devez utiliser la dernière version du plug-in. Les nouvelles versions résolvent généralement certains problèmes connus et sont plus stables lors de l'utilisation de nouvelles versions.

2.3 Adaptation mobile

Il peut y avoir des problèmes avec l'effet d'affichage de jQuery Datagrid sur le terminal mobile. Par conséquent, lors de la modification des données, un traitement d'adaptation séparé est requis pour le terminal mobile afin de garantir une bonne expérience utilisateur.

Résumé

Dans les applications Web modernes, les tableaux de données jouent un rôle essentiel dans leurs capacités d'interaction utilisateur et de présentation des données. jQuery Datagrid est un bon outil pour aider les développeurs à créer rapidement des tableaux de données puissants. Dans cet article, nous avons expliqué comment utiliser jQuery Datagrid pour implémenter la modification des données, et avons également évoqué certains problèmes et techniques auxquels il faut prêter attention lors de la mise en œuvre de la modification des données. J'espère que cet article vous sera utile pour apprendre et utiliser jQuery Datagrid.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!