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
Mary-Kate Olsenoriginal
2024-11-07 19:06:03621parcourir

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

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

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:
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