Comment mettre en surbrillance des lignes dans un JqGrid en fonction de l'état des cases à cocher ?

Mettre en surbrillance les lignes lorsque la case à cocher est vraie

Dans votre projet jqGrid, vous souhaitez mettre en surbrillance les lignes en fonction de l'état d'une case à cocher.

Rappel Rowattr

La version 4.3.2 de jqGrid introduit le rappel rowattr, qui vous permet d'ajouter des attributs personnalisés aux lignes pendant le processus de remplissage de la grille. Il s'agit d'une approche appropriée pour la mise en évidence des lignes.

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Verify this logic based on your data structure
        return {"class": "myAltRowClass"};
    }
}

Classe CSS pour la mise en évidence

Définissez une classe CSS myAltRowClass qui définit la couleur d'arrière-plan des lignes en surbrillance.

Multiselect et gridview

Pour la mise en surbrillance des lignes sans sélection de lignes, omettez la multiselect : true. Pour améliorer les performances, activez GridView : true.

Utilisation des modèles de colonnes

Pour rationaliser votre code, vous pouvez utiliser des modèles de colonnes :

cmTemplate

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}

Modèles personnalisés

Créez des modèles personnalisés pour les propriétés couramment utilisées :

var myCheckboxTemplate = {
    formatter: 'checkbox',
    edittype: 'checkbox',
    type: 'select',
    editoptions: {value: "1:0"}
};

var myTextareaTemplate = {
    edittype: "textarea",
    editoptions: {size: "30", maxlength: "30"}
};

ColModel optimisé

colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
        editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate},
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate},
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate},
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate},
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
    //If the GroupHeader is true the row background is yellow
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}

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!