Comment mettre en surbrillance les lignes jqGrid lorsque leurs cases sont cochées ?

Mettre en surbrillance la ligne lorsque la case à cocher est vraie

Introduction :

Dans le développement Web, il est souvent souhaitable de fournir des repères visuels aux utilisateurs pour les guider une interface. Une façon courante de mettre en évidence des informations importantes consiste à utiliser des couleurs ou des dégradés pour attirer l’attention sur certains éléments. Dans les grilles de données, les lignes sont fréquemment sélectionnées ou modifiées à l'aide de cases à cocher. Pour améliorer l'expérience utilisateur, il peut être avantageux de mettre en surbrillance les lignes dont les cases sont cochées. Cet article explique comment obtenir cet effet à l'aide de jQuery et du plugin jqGrid.

Implémentation de la mise en surbrillance des lignes :

Pour mettre en évidence les lignes en fonction des valeurs des cases à cocher, nous pouvons utiliser le rappel rowattr introduit dans la version 4.3 de jqGrid. .2. Ce rappel permet de manipuler les attributs de ligne lors du remplissage de la grille, permettant ainsi un style conditionnel basé sur des données spécifiques.

Considérez le code JavaScript suivant :

rowattr: function (rd) {
  if (rd.GroupHeader === "1") { // Adjust condition as per your model
    return { "class": "myAltRowClass" };
  }
}

Dans cet exemple, nous vérifions la propriété GroupHeader de une ligne (rd) et, si elle a une valeur de "1", nous attribuons une classe CSS personnalisée (myAltRowClass) à la ligne. Cette classe CSS peut être définie pour modifier la couleur d'arrière-plan des lignes en surbrillance.

Optimisation du code avec des modèles :

Pour rationaliser votre code, vous pouvez exploiter des modèles de colonnes et des variables pour définir des propriétés communes et comportements. Considérez les optimisations suivantes :

cmTemplate: { align: 'center', sortable: false, editable: true, width: 80 },
myCheckboxTemplate = {
  formatter: 'checkbox',
  edittype: 'checkbox',
  type: 'select',
  editoptions: { value: "1:0" }
},
myTextareaTemplate = {
  edittype: "textarea",
  editoptions: { size: "30", maxlength: "30" }
};

colModel: [
  { name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", ... },
  { name: 'Order1', index: 'Order1', template: myTextareaTemplate },
  { name: 'Order2', index: 'Order2', template: myTextareaTemplate },
  // ... Additional columns omitted for brevity
  { name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate },
  { name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate }
],

En utilisant des modèles et des variables, votre code devient plus concis et maintenable.

Conclusion :

Incorporation de la mise en surbrillance des lignes en fonction des valeurs des cases à cocher à l'aide Le rappel rowattr de jqGrid améliore non seulement l'expérience utilisateur, mais met également en valeur la flexibilité et l'efficacité du plugin. En combinant cette technique avec des modèles de colonnes, vous pouvez créer des grilles de données élégantes et bien structurées qui répondent à vos besoins spécifiques.

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!