jQuery - Praktischer Einsatz (1)

Zugriffe: 3651 starstarstarstarstarstarstarstarstarstar Bewertung:2,67 (3 Bewertungen) 01.04.2009

Ich muss zugestehen, es ist nicht jQuery, das es möglich macht, sondern eher das Verständnis für Javascript. Ich muss schon des öfteren Schmunzeln, wenn ich lese "viel clientseitige Funktionalität, aber bitte ohne Javascript". Ich hab keine Ahnung, wer sich das ausdenkt, doch gehört Javascript heute zur Webanwendung, wie die Butter zum Brot.

Michael Schwarz hat in seinem Blog zB. eine Möglichkeit aufgezeigt, wie einfach und praktisch man clientseitige Events (besser) verwalten kann.

Hierzu wird der Event nicht auf dem einzenlen Element registriert, sondern auf dem "Mutterelement". Der Rest läst sich einfach dann ermitteln. Einzigst die Eigenschaft srcElement wird offenbar im jQuery nicht ganz konsquent durchgesetzt. So führt deren Verwendung mit dem Netscape-Browser zu einem Scriptfehler. Ich habe mich daher auf die target Eigenschaft festgelegt, welche bislang in allen Browsern fehlerfrei interpretiert wurde. Ein weiterer Vorteil liegt letztlich auch in der Administration und Wartbarkeit der Events.

Angeregt von Michael s Beitrag, hab ich mich die Tage mit einem "WebControl" beschäftigt, was an sich keines ist, da es nahezu vollständig über Javascript realisiert wird. Ausgangssituation ist hier ein JSON-String.

<script type='javascript' >
 var daten = {
 Elements : [
 { Name : "Element 1", Elements : [ "E1 Wert 1","E1 Wert 2","E1 Wert 3","E1 Wert 4" ] },
 { Name : "Element 2", Elements : [ "E2 Wert 1","E2 Wert 2","E2 Wert 3","E2 Wert 4" ] },
 { Name : "Element 3", Elements : [ "E3 Wert 1","E3 Wert 2","E3 Wert 3","E3 Wert 4" ] }
 ]
 };
 <\script>

Um das ganze dann auch ausgeben zu können, kann man das Object daten um eine Methode, die ich mal getTree genannt habe, erweitern.

Hierbei prüft man gescheiterweise, ob man nicht schon einmal die ganze Arbeit des Rendern geleistet hat. Daher ist es ratsam, das treeView-Element vorher zu selektieren und dann gegebenenfalls z.B. nur einzublenden. Ist das "Grundgerüst" noch nicht am Server vorhanden, erstellt man es und bindet zugleich den "einzigen" Click-Eventhandler an das Object.

var div = $("<div id='treeView' ><div id='treeViewContent' /></div>") 

Im Click-Eventhandler ermittelt man dann u.a. mit der vom Michael Schawrz veröffentlichten Methode das eigentliche Eventelement und nimmt die weitere Verarbeitung vor, in diesem Fall, das Rendern und Anzeigen der Unterknoten.

.bind("click", function(ev) {
 var ele = $(ev.target);
 var e = findParent(ele, "div[:parent=#treeViewContent]", 9);
 var name = e.find("a").text();
 
 if (e.attr("name") != undefined
 && e.attr("name") == "subNode") {
 //mach was...
 return false;
 } else if (e.parent().attr("id") == "treeViewContent") {
 var img = e.find("img");
 var subNode = $("#sub" + name); if (img.attr("src").endWidth("plusnode.png")) {
 img.attr("src", "images/minusnode.png");
 e.toggleClass("parentNodeSelect");
 var o = json.Elements.getByName(name);
 if (subNode.length == 0) {
 var sub = $("<div style='clear:both; width:auto;' id='sub" + name + "' />")
 .css({ overflow: "hidden" });
 var on = o.Elements.length;
 for (var s = 0; s < on; s++) {
 var _s = $("<div class='treeNode' name='subNode' ><a>" + o.Elements[s] + "</a></div>");
 _s.appendTo(sub);
 }
 sub.insertAfter(e);
 } else {
 subNode.show();
 }
 }
 else {
 img.attr("src", "images/plusnode.png");
 e.toggleClass("parentNodeSelect");
 subNode.hide();
 }
 } else {
 return false;
 }
 });
 

Hat man alles richtig gemacht, erhält man folgende Anzeige:

Treeview Sample

Dies Sample lässt viele Möglichkeiten offen. In einem aktuellen Projekt habe ich so zum Beispiel dies als Grundlage dafür genommen, um in einer Client-Server-Kommunikation ganz auf das Update-Panel zu verzichten. Was soll ich sagen, es funktioniert.

Ebenso kann man dieses Sample dahin erweitern, dass man z.B. Tabellenansichten umsetzt oder gar eine Filterfunktion für die Treeview-Selektion implementiert.

Interessant ist hierbei der Einsatz von jLINQ. jLINQ ist dabei eine interessante jQuery-Implementierung von .NET LINQ im Javascript-Umfeld. Als Datenbasis dient ein Array von Objekten, auf die dann die Afrage ausgeführt werden kann.

 

 


1 Kommentar
kdpiku kdpiku Freitag, 2. Oktober 2009
figuring out to jQuery lately, try it out.. :)

Neuen Kommentar verfassen

Bestätigungscode