Maison > interface Web > js tutoriel > Comment mettre en évidence les lignes jqGrid en fonction de la valeur de la case à cocher ?

Comment mettre en évidence les lignes jqGrid en fonction de la valeur de la case à cocher ?

Mary-Kate Olsen
Libérer: 2024-11-07 19:06:03
original
687 Les gens l'ont consulté

How to Highlight jqGrid Rows Based on Checkbox Value?

Mise en surbrillance des lignes en fonction de la valeur de la case à cocher

Dans un jqGrid, vous pouvez mettre en surbrillance les lignes lorsque la case correspondante est cochée. Ceci peut être réalisé en tirant parti de la fonctionnalité de rappel rowattr.

Implémentation

Pour implémenter ce comportement, utilisez le rappel rowattr comme suit :

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Verify the condition based on your data
        return {"class": "myAltRowClass"};
    }
}
Copier après la connexion

Explication

Le rappel rowattr prend un objet de données de ligne comme entrée et renvoie un objet contenant des attributs supplémentaires à appliquer à cette ligne particulière. Dans ce cas, nous vérifions si la propriété GroupHeader de la ligne est égale à "1". Si tel est le cas, nous renvoyons un objet qui définit la classe CSS de la ligne sur "myAltRowClass".

Classe CSS

Vous devez définir la classe CSS "myAltRowClass" dans votre feuille de style pour spécifier le style de surbrillance des lignes souhaité, tel que la couleur d'arrière-plan.

Exemple

Le code suivant montre un exemple de la façon de mettre en œuvre cette solution :

$("#maingrid").jqGrid({
    // Other grid options...
    rowattr: function (rd) {
        if (rd.GroupHeader === "1") {
            return {"class": "myAltRowClass"};
        }
    }
});
Copier après la connexion

Notes supplémentaires

  • Modèles de colonnes : Vous pouvez utiliser des modèles de colonnes pour simplifier et rationaliser vos définitions de colModel.
  • gridview : true : Définir Gridview : true dans les options de votre grille peut améliorer les performances et simplifier la gestion des lignes.
  • Vérifier la compatibilité : Assurez-vous que la solution est compatible avec votre version spécifique de jqGrid .

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal