Faddie bloggt – schon wieder!

Dojo Tutorial mit Grid – Teil 6: Links im Grid

Kommen wir nun (endlich) zum vorerst letzten Teil des Dojo-Tutorials. Der einzig fehlende Teil ist noch das Popup-Fenster, dass wir aus dem Grid heraus öffnen wollen. Dazu müssen wir in der View auf eine eigene Funktion verweisen.

Wenn das hier fertig ist, kann ich auch endlich Rechtschreibfehler suchen gehen.

Erinnern wir uns nochmal an die (das?) View vom Grid. Wir haben bei “name” den Spaltennamen angegeben und bei “field” den Namen im Modell (bzw. dem Array vom Webserver). Jetzt wollen wir aber aus dem Spalteninhalt einen Link generieren.

Es wäre auch möglich, bereits serverseitig den Link zu generieren und nur noch im Grid anzuzeigen. Allerdings würde die zu übertragende Datenmenge erheblich wachsen und somit das Laden verzögern.

Erweitern wir die Grid-View um eine Zusätzliche Spalte:

var view1 = {
 cells: [
 	[
 		{name: 'Kundennummer', field:'lfdnr'},
 		{name: 'Vorname', field:'vname'},
 		{name: 'Nachname', field:'nname'},
 		{name: 'Beruf', field:'beruf'},
 		{name: 'Alter', field:'alter'},
 		{name: 'Aktion', get: linkImGrid}
 	]
 ]
};

Anstelle der Eigenschaft “field” verwenden wir “get”. Diese gibt dem Grid an, dass der Inhalt für diese Spalte nicht aus dem Modell kommen soll, sonden von der Funktion “linkImGrid”.

Diese sieht wie folgt aus:

function linkImGrid(inRowIndex) {
 var zelle = grid.model.getDatum(inRowIndex,0);
 if (zelle == 0 || isNaN(zelle))
 	return '';
 else
 	return '<a href="javascript:zeige_Popup('+zelle+')" title="Zeigen">Zeigen</a>';
}

Das Grid übergibt der Funktion völlig von selbst die Zeilennummer als Parameter, hier “inRowIndex”. Über die Funktion “grid.model.getDatum” holen wir uns den Wert der ersten Zelle, also die Kundennummer bzw. “ldfnr”. Anzumerken sei übrigens, dass getDatum ein etwas wiedersprüchlicher Name für die Funktion ist. Aber im Quelltext vom Grid steht, dass man das so machen soll – fragt sich natürlich, wie lange noch… dafür ist das leider DojoX (Experimental). Eine andere Funktion für diesen Zweck wüsste ich jedenfalls nicht, also getDatum, die alles holt, nicht nur das Datum.

Wenn die erste Zelle in der Zeile 0 oder leer ist, wird kein Link generiert, ansonsten schon. Man könnte auch noch mehr Entscheidungen einbauen, z.B. wenn das Alter über 60 ist, dann zeige den Link in Schriftgröße 20 an oder so
Zu guter Letzt noch die Popup-Funktion, die aber wirklich nichts besonderes macht:

function zeige_Popup(lfdnr) {
 var url = "gridtut_pop.html";
 var optionen = "width=650, height=650, left=0, top=0, scrollbars=1,location=0,statusbar=0,menu bar=0,resizable=1";
 win=window.open(url,"Zeige Kunden: " + lfdnr,optionen);
 win.focus();
}

Mit dem Parameter könnte man auch sinnvollere Dinge anstellen, z.B. diesen per Get-Parameter an das Popup übertragen. usw.

Man könnte meinen, das wir jetzt fertig wären. Leider hat der Grid noch einen geringfügigen Bug (Dojo 1.0.2) – wenn man mit der Maus über eine Zeile fährt, drängt sich das Browser-Fenster in den Vordergrund. Das passiert zwar (natürlich) nur beim Internet Explorer, ist aber trotzdem sehr lästig und schließt die Verwendung von Popups eigentlich schon wieder aus.

Nun kann man entweder die Popups in Dojo-Dialoge einbetten oder folgenden Workaround einbauen.

In der createGrid-Funktion ändern wir die Zeile zum Erstellen des Grids wie folgt ab:

grid = new dojox.Grid({id: "DasGrid", model: ddata, onRowMouseOver: keepPopup});

Wir geben also eine eigene Funktion für das Ereignis an, wenn die Maus über eine Zelle fährt.

function keepPopup(evt) {
 if (win && !win.closed) win.focus();
}

Damit das so funktioniert, muss die Variable für das Popup sich auch in den Club der globalen Variablen gesellen. Ungefähr so:

var win = false;

Diese Funktion besagt folgendes: Wenn ein Popup existiert und noch nicht geschlossen wurde, dann bringe es wieder in den Vordergrund. So flackert das Popup natürlich, wenn man mit der Maus über die Zeilen geht, und das auch noch im völlig unschuldigen Firefox. Daher würde ich lieber auf einen Dojo-Dialog setzen, sofern man es sich leisten kann.

Beim Surfen ohne Javascript wird dieser Link noch nicht angezeigt, daher fügen wir ihn schnell serverseitig hinzu. Hier der entsprechende Teil für PHP:

	// Anzeige ohne Javascript
 else {
 	echo "<table border='1'>\n";
 	echo "<tr><td>Kundennummer</td>
 			<td>Vorname</td>
 			<td>Nachname</td>
 			<td>Beruf</td>
 			<td>Alter</td>
 			<td>Aktion</td>";
 	echo "</tr>\n";
 	foreach ($ergebnis as $zeile => $wert) {
 		echo "<tr>";
 		echo "<td>".$wert['lfdnr']."</td>";
 		echo "<td>".$wert['vname']."</td>";
 		echo "<td>".$wert['nname']."</td>";
 		echo "<td>".$wert['beruf']."</td>";
 		echo "<td>".$wert['alter']."</td>";
 		echo "<td><a href=\"gridtut_pop.html\" target=\"_blank\" title=\"Zeigen\">Zeigen</a></td>";
 		echo "</tr>\n";
 	}
 	echo "</table>\n";
 }

So, damit kommen wir zum Ende. Ist doch alles etwas ausführlicher geworden, als ursprünglich geplant.

Step-9 zum Runterladen: Gridtut-9-js Gridtut-9-php