Wie hebe ich jqGrid-Zeilen hervor, wenn ihre Kontrollkästchen aktiviert sind?

Zeile hervorheben, wenn das Kontrollkästchen wahr ist

Einführung:

Bei der Webentwicklung ist es oft wünschenswert, Benutzern visuelle Hinweise zu geben, die sie durch die Reihe führen eine Schnittstelle. Eine gängige Möglichkeit, wichtige Informationen hervorzuheben, besteht darin, Farben oder Farbverläufe zu verwenden, um die Aufmerksamkeit auf bestimmte Elemente zu lenken. In Datengittern werden Zeilen häufig mithilfe von Kontrollkästchen ausgewählt oder geändert. Um das Benutzererlebnis zu verbessern, kann es hilfreich sein, Zeilen hervorzuheben, deren Kontrollkästchen aktiviert sind. In diesem Artikel wird untersucht, wie Sie diesen Effekt mit jQuery und dem jqGrid-Plugin erzielen.

Zeilenhervorhebung implementieren:

Um Zeilen basierend auf Kontrollkästchenwerten hervorzuheben, können wir den in jqGrid Version 4.3 eingeführten rowattr-Callback verwenden .2. Dieser Rückruf ermöglicht die Bearbeitung von Zeilenattributen während des Rasterfüllens und ermöglicht so eine bedingte Gestaltung basierend auf bestimmten Daten.

Betrachten Sie den folgenden JavaScript-Code:

rowattr: function (rd) {
  if (rd.GroupHeader === "1") { // Adjust condition as per your model
    return { "class": "myAltRowClass" };
  }
}

In diesem Beispiel überprüfen wir die GroupHeader-Eigenschaft von eine Zeile (rd) und wenn sie den Wert „1“ hat, weisen wir der Zeile eine benutzerdefinierte CSS-Klasse (myAltRowClass) zu. Diese CSS-Klasse kann definiert werden, um die Hintergrundfarbe der hervorgehobenen Zeilen zu ändern.

Code mit Vorlagen optimieren:

Um Ihren Code zu optimieren, können Sie Spaltenvorlagen und Variablen nutzen, um gemeinsame Eigenschaften und zu definieren Verhaltensweisen. Erwägen Sie die folgenden Optimierungen:

cmTemplate: { align: 'center', sortable: false, editable: true, width: 80 },
myCheckboxTemplate = {
  formatter: 'checkbox',
  edittype: 'checkbox',
  type: 'select',
  editoptions: { value: "1:0" }
},
myTextareaTemplate = {
  edittype: "textarea",
  editoptions: { size: "30", maxlength: "30" }
};

colModel: [
  { name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", ... },
  { name: 'Order1', index: 'Order1', template: myTextareaTemplate },
  { name: 'Order2', index: 'Order2', template: myTextareaTemplate },
  // ... Additional columns omitted for brevity
  { name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate },
  { name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate }
],

Durch die Verwendung von Vorlagen und Variablen wird Ihr Code prägnanter und wartbarer.

Fazit:

Einbinden der Zeilenhervorhebung basierend auf Kontrollkästchenwerten mithilfe von Der rowattr-Callback von jqGrid verbessert nicht nur das Benutzererlebnis, sondern demonstriert auch die Flexibilität und Effizienz des Plugins. Durch die Kombination dieser Technik mit Spaltenvorlagen können Sie elegante und gut strukturierte Datenraster erstellen, die Ihren spezifischen Anforderungen entsprechen.

Das obige ist der detaillierte Inhalt vonWie hebe ich jqGrid-Zeilen hervor, wenn ihre Kontrollkästchen aktiviert sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!