Wie werden Zeilen in einem JqGrid basierend auf dem Kontrollkästchenstatus hervorgehoben?-js-Tutorial-php.cn

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

DDD

Freigeben： 2024-11-07 10:49:02

Original

882 Leute haben es durchsucht

How to Highlight Rows in a JqGrid Based on Checkbox Status?

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

Nach dem Login kopieren

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}

Nach dem Login kopieren

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

Nach dem Login kopieren

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}

Nach dem Login kopieren

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!