Comment mettre en surbrillance une ligne lorsqu'une case à cocher est vraie dans JqGrid
Dans un jqGrid, vous pouvez facilement mettre en surbrillance une ligne lorsque la case à cocher est vrai. Voici un guide étape par étape :
-
Utiliser le rappel rowattr :
La version 4.3.2 de jqGrid a introduit le rappel rowattr, qui vous permet de définir des attributs personnalisés pour chaque ligne. C'est parfait pour surligner en fonction d'une valeur de case à cocher.
-
Créer une fonction Rowattr :
Définissez une fonction rowattr qui vérifie la valeur de la colonne GroupHeader (ou toute autre colonne de case à cocher que vous avez ). Si la valeur est « 1 », renvoie un nom de classe qui définit le style de surbrillance.
gridview: true,
rowattr: function (rd) {
if (rd.GroupHeader === "1") { // Adjust this to match your checkbox column
return {"class": "myAltRowClass"};
}
}
Copier après la connexion
-
Définissez la classe de surbrillance :
Dans votre CSS , créez une classe appelée myAltRowClass qui spécifie le style de surbrillance, tel qu'un arrière-plan jaune.
-
Inclure des modèles de colonnes :
Pour rationaliser votre code, utilisez des modèles de colonnes pour définir des propriétés communes pour plusieurs colonnes. Par exemple, si toutes vos entrées de texte ont la même taille et la même longueur maximale :
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
Copier après la connexion
-
Utilisez des modèles de cases à cocher :
De même, vous pouvez créer un modèle pour vos colonnes de cases à cocher :
var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
editoptions: {value: "1:0"}};
Copier après la connexion
Ensuite, dans votre colModel, au lieu de définir des objets complexes pour chaque colonne de cases à cocher, utilisez simplement le modèle :
{name: 'GroupHeader', index: 'GroupHeader', template: myCheckboxTemplate}
Copier après la connexion
En suivant ces étapes, vous pourrez mettre en évidence les lignes en fonction des valeurs des cases à cocher dans votre 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!