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)
 });

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

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

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

});

Notes

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;

Résumé

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!