Comment mettre en surbrillance des lignes dans jqGrid en fonction de la valeur de la case à cocher ?

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

Dans jqGrid, vous pouvez mettre en surbrillance les lignes pour lesquelles une case à cocher spécifique est vraie, vous donnant un retour visuel lorsque certains les conditions sont remplies. Ceci peut être réalisé grâce aux rappels et au style CSS.

Mise en œuvre :

1. Rappel Rowattr : Utilisez le rappel rowattr pour définir des attributs personnalisés aux lignes. Dans votre cas, vous pouvez définir une classe CSS pour les lignes en surbrillance.

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}

2. Style CSS : Définissez une classe CSS pour contrôler l'apparence des lignes en surbrillance. Par exemple, vous pouvez utiliser ce qui suit :

.myAltRowClass {
    background-color: #ffff00;
}

Solution alternative :

En plus du rappel rowattr, jqGrid version 4.3.2 propose un nouvelle fonctionnalité appelée GridView, qui améliore les performances et offre un moyen plus simple de mettre en surbrillance les lignes.

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}

Modèles de colonnes :

Pour rationaliser votre code, pensez à utiliser des modèles de colonnes pour définir des propriétés communes à plusieurs colonnes. Cela simplifie les définitions de vos colonnes et les rend plus faciles à gérer.

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
...
colModel: [
    {name: 'TypeID', ...},
    {name: 'Order1', template: myTextareaTemplate},
    // ...
]

Exemple :

#maingrid").jqGrid({
    rowattr: function (rd) {
        if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
            return {"class": "myAltRowClass"};
        }
    },
    cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
    colModel: [
        {name: 'TypeID', ...},
        {name: 'Order1', template: myTextareaTemplate},
        // ...
    ]
});

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!