Wie werden Zeilen in einem JqGrid basierend auf dem Kontrollkästchenstatus hervorgehoben?

Zeilen hervorheben, wenn das Kontrollkästchen wahr ist

In Ihrem jqGrid-Projekt möchten Sie Zeilen basierend auf dem Status eines Kontrollkästchens hervorheben.

Rowattr-Rückruf

Version 4.3.2 von jqGrid führt den Rowattr-Rückruf ein, mit dem Sie während des Rasterfüllvorgangs benutzerdefinierte Attribute zu Zeilen hinzufügen können. Dies ist ein geeigneter Ansatz zum Hervorheben von Zeilen.

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

CSS-Klasse zum Hervorheben

Definieren Sie eine CSS-Klasse myAltRowClass, die die Hintergrundfarbe für hervorgehobene Zeilen festlegt.

Multiselect und Gridview

Für Zeilenhervorhebung ohne Zeilenauswahl, Multiselect weglassen: true. Um die Leistung zu verbessern, aktivieren Sie Gridview: true.

Verwendung von Spaltenvorlagen

Um Ihren Code zu optimieren, können Sie Spaltenvorlagen verwenden:

cmTemplate

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

Benutzerdefinierte Vorlagen

Erstellen Sie benutzerdefinierte Vorlagen für häufig verwendete Eigenschaften:

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

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

Optimiertes colModel

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}

Das obige ist der detaillierte Inhalt vonWie werden Zeilen in einem JqGrid basierend auf dem Kontrollkästchenstatus hervorgehoben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!