Javascript-Entwicklung mit Jquery

Client-seitige Operationen sind durchaus nützlich - auch wenn Jahre des Streits um wenig nützlichen Eye Candy den Ruf von Javascript beschädigt haben. Sie ordnen etwa Tabellen nach Benutzerwunsch neu an, ohne den Server nochmals zu befragen. Wäre da nur nicht der mühsame Weg, den Javascript, CSS und das DOM vorgeben und den zudem diverse Browservarianten erschweren.

Neue Hoffnung versprechen einige Bibliotheken, allen voran Jquery [1]. Sie bietet ein API an, über das Entwickler den DOM-Tree manipulieren und das viele Praxisanforderungen abdeckt. Welche Untermenge der Elemente einer Seite der Entwickler auch auswählt oder verändert, beim Einsatz von Jquery reicht dafür oft eine einzige Zeile Code.

Hinzu kommen animierte Effekte, die ohne die Unterstützung einer Bibliothek eine umständliche Timer-Programmierung voraussetzen. Die separat, jedoch mit den Core-Entwicklern abgestimmte Erweiterung Jquery-UI [2] bietet Drag-&-Drop-Support und Widgets wie etwa Karteireiter an. Diese von anderen Javascript-Bibliotheken in den Vordergrund gerückten Widgets erlauben es, Ansichten ohne das Neuladen der Seite umzuschalten, oder öffnen Dialoge ohne neue Browserfenster [3]. Jquery darf der Entwickler unter der MIT-Lizenz oder der GPL 2 verwenden.

Konkret, bitte!

Gerade Tabellen, die viele Daten enthalten, aber nur einen Teil davon auf einmal anzeigen können, profitieren vom nachträglichen Aufpeppen durch Javascript: Dürfen Anwender etwa die Werte spaltenweise sortieren, erhalten sie eine bessere Übersicht. Den Anwendungscode, der die Tabellen erzeugt, ändert der Entwickler dazu nur minimal: Er bindet lediglich Jquery, die Sortierfunktion und ein Stylesheet in die Seite ein (Listing 1).

01 function sortTable(SortTable, SortColumn, Order){
02     var CurrentRow; var CurrentSortField; Rows=new Array();
03     var CurrentTable=$("table:eq("+SortTable+") tbody");
04 
05     $("tr", CurrentTable).each(function(i){
06         CurrentRow=$(this).html();
07         CurrentSortField=
08             $("td:eq("+SortColumn+")", this).text();
09 
10         Combined=new Array(2);
11         Combined[0]=CurrentSortField;
12         Combined[1]=CurrentRow;
13         Rows[i]=Combined;
14     })
15 
16     Rows.sort(function(a,b){
17         if (parseFloat(a[0]) && parseFloat(b[0]))
18                 return parseFloat(b[0]) - parseFloat(a[0])
19         else
20             return (a[0] < b[0]) ? -1 : 1
21     });
22     if (Order == "down") Rows.reverse();
23 
24     var TBody="";
25     for (j=0; j<Rows.length; j++){
26         TBody+="<tr>"+Rows[j][1]+"</tr>";
27     }
28     CurrentTable.html(TBody);
29     addClasses(SortTable);
30     var wholeTable=$("table:eq("+SortTable+")");
31     $("th img", wholeTable).attr('src', 'double-arrow.png');
32     var imgSrc=(Order=='up')?'up-arrow.png':'down-arrow.png'
33     $("th:eq("+SortColumn+") "+"img", wholeTable).attr('src', imgSrc);
34 }
35 
36 function addClasses(i){
37     var wholeTable=$("table:eq("+i+")");
38     $("tr, td", wholeTable).removeAttr("class");
39 
40     var oddRows=$("tr:odd", wholeTable);
41     $("td:even", oddRows).addClass("darkYellow");
42     $("td:odd", oddRows).addClass("lightYellow");
43     var evenRows=$("tr:even", wholeTable);
44     $("td:even", evenRows).addClass("darkBlue");
45     $("td:odd", evenRows).addClass("lightBlue");
46 
47     $("th", wholeTable).addClass("black");
48 }
49 
50 $(document).ready(function(){
51         $('th').click(function(){
52             SortTable=$("table").index($(this).parents("table"));
53             SortColumn=$("table:eq("+SortTable+") th").index($(this));
54             lastUp=$("table:eq("+SortTable+")").data('lastUp');
55             Order=(lastUp==SortColumn)?'down':'up';
56             $("table:eq("+SortTable+")")
57               .data('lastUp',(lastUp==SortColumn)?null:SortColumn);
58 
59             sortTable(SortTable, SortColumn, Order);
60         })
61 
62     $("th").prepend("&nbsp;<img src='double-arrow.png'>&nbsp;");
63     $("table").each(function(i){
64     addClasses(i);
65     $(this).before("<div class='collapseArrow'>"+
66        "<img src='collapse.png' align='left'> Tabelle "+(i+1)+"</div>")
67     })
68 
69     $('.collapseArrow').click(function(){
70         var Table=$(this).next();
71         if(!Table.data('hidden')){
72             Table.fadeOut('slow');
73             Table.data('hidden', true);
74             $(this).children('img').attr('src', 'expand.png');
75         }
76         else{
77             Table.fadeIn('slow');
78             Table.data('hidden', false);
79             $(this).children('img').attr('src', 'collapse.png');
80         }
81     })
82 })

Client-seitiges Sortieren per Javascript ist alles andere als eine Notlösung: Da kein Kontakt zum Server erforderlich ist, reagiert der Browser, zumindest bei nicht zu umfangreichen Tabellen, in Sekundenbruchteilen. Solange keine in Javascript schwer umsetzbaren Sortieralgorithmen, zu große oder sich Server-seitig schnell ändernde Datenmengen dem entgegenstehen, ist das Anwendererlebnis die Mühe wert. Dazu ist im vorgestellten Beispiel nicht einmal die Hilfe des Servers nötig, der die Auswahl von Seitenelementen mit »Id«-Attributen erleichtert.

Prinzipiell

Um die Tabelle zu sortieren, packt der Entwickler das HTML aller Zeilen in ein Array, sortiert es nach der gewünschten Spalte und überschreibt den bisherigen Tabellenkörper mit dem neu generierten (Abbildung 1). Dazu extrahiert er den Inhalt von Zeile »i« aus Tabelle »k«. Die Sortierfunktion braucht neben dem Code noch gesondert die Inhalte der zu sortierenden Spalte. Die Lösung findet sich in den Kapiteln "Selectors" und "Traversing" der Jquery-Dokumentation [4]. Selectors wählen einen Knotenpunkt des DOM-Trees aus, Traversing (Durchqueren) bedeutet in diesem Fall, aus der vorausgewählten Menge einzelne Elemente herauszugreifen.

Abbildung 1: DOM-Akrobatik ist gefragt: Die Sortierfunktion benötigt den HTML-Content aller Zeilen (blau), dazu gesondert den Text der Zellen, nach denen sie die Zeilen ordnen soll (orange).

Um mit Jquery die Zelle (i, j) der ersten Tabelle auszuwählen, genügt der im Vergleich zur normalen Javascript-Syntax kurze Ausdruck »$(table:eq(0) tr:eq(i) td:eq(j)).text()«. Zeile 8 in Listing 1 setzt diesen Ansatz um. »$()« ist die mit minimalem Tippaufwand verbundene Selektorfunktion, mit der praktisch jeder Jquery-Aufruf beginnt. Als Argument erhält er im Beispiel drei HTML-Tags gefolgt von einem durch den Doppelpunkt gekennzeichneten Filter. Reiht der Entwickler mehrere Selektoren - durch Leerzeichen getrennt - aneinander, so sucht der folgende Selektor innerhalb des Ergebnisses der vorausgehenden weiter. Ein Komma als Trennzeichen dagegen addiert die Ergebnisse. Der Filter »:eq(0)« greift das erste Element aus der Ergebnisliste heraus.

Außer nach Tag-Namen wählen Jquery-Selektoren Seitenelemente auch per ID, vor allem aber sogar nach Klassennamen aus. So beheben sie eines der Javascript-Ärgernisse, nämlich das Fehlen einer Funktion »getElementByClass()«. Mit »$.Klassenname[.Klassenname])« wählt Jquery alle DOM-Elemente, die einer oder mehreren Klassen angehören.

Unter den Filtern finden sich praktische Arbeitserleichterungen wie »:odd« und »:even«, die die Beispielanwendung für das abwechselnde Einfärben der Tabellenzeilen nutzt. Die Bibliothek filtert auch nach Attributen, zum Beispiel alle Elemente mit rotem Hintergrund. Den Funktionsumfang erläutert die Dokumentation in den Kapiteln "Selectors" und "Traversing" verständlich anhand von Beispielen (Abbildung 2).

Abbildung 2: Anschaulich und übersichtlich: Die Dokumentation ist ein starkes Argument für Jquery. Funktionen zum Traversing helfen Entwicklern auf dem Weg durch den DOM-Tree.