Zeile selektieren mit Rico LiveGrid
Die Bibliothek Rico 2.0 stellt eine hübsche Tabellen zur Verfügung, die verschiedene Interaktionsmöglichkeiten für Anwender bieten. Die Breite der Spalten läßt sich verändern, somit auch die Gesamtbreite der Tabelle. Die Sortierung der Zeilen kann nach jeder Spalte erfolgen. Beide Einstellungen werden von Anwendern vorgenommen und während der Session gespeichert.
Die Tabelle kann so konfiguriert werden, daß beim Selektieren einer Zeile, diese hervorgehoben wird und sogar Aktionen auslöst. Das ist allerdings nicht die Default-Einstellung, so daß man dazu noch etwas hinzu programmieren muß.
Zum einen benötigt man ein »GridMenu« aus der Bibliothek »LiveGridForms«. Zum anderen muß man konfigurieren, welche Aktion bei einem einfachen oder doppelten Klick auf eine Zeile ausgeführt werden soll. In diesem Fall wird bei einem einfachen Klick die Funktion »drilldown« aufgerufen, die ihrerseits die Methode »drillDown« im »TableEdit«-Objekt aufruft, die letztendlich für das Hervorheben der Zeile sorgt.
var options = { menuEvent: 'contextmenu', highlightElem: "menuRow", click: drilldown }; var buffer = new Rico.Buffer.AjaxSQL('ricoXMLquery.php', {}); var grid = new Rico.LiveGrid ('LiveGrid', buffer, options); grid.menu = new Rico.GridMenu(); grid.edit = new Rico.TableEdit(grid); function drilldown(e) { var row = grid.edit.drillDown(e,0,0); }
Hier wird zusätzlich konfiguriert, daß man mit einem Klick auf die rechte Maustaste das Kontextmenü zum »LiveGrid« erhält. Wenn die Selektion mit einem doppelten Klick erfolgen soll, wird als Attribut »dblclick« verwendet.
Dieses Beispiel ist aus einer bestehenden Anwendung extrahiert und auf die wesentlichen Einstellungen und Code-Zeilen reduziert.