Open Source im professionellen Einsatz
Linux-Magazin 02/2010
© Alan Reed, Fotolia.com

© Alan Reed, Fotolia.com

Javascript-Entwicklung mit Jquery

Gut sortiert

Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client - wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

1070

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).

Listing 1: Sortierbare
Tabelle

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.

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • HTML 5

    Dank HTML 5 lassen sich Client-Server-Anwendungen mit grafischer Oberfläche programmieren, wie sie das Web bisher nicht kannte. Dieser Artikel zeigt, wie das mit Canvas, SVG und Websockets geht. Die Bibliotheken Jquery, Visualize und Autobahn helfen bei der Arbeit.

  • ECMA-Script 6

    Der kommende Sprachstandard ECMA-Script 6 beseitigt viele historische Javascript-Eigenheiten. Die bisher vermissten Klassen, Module und Default-Parameter erleichtern das Coden vor allem den Umsteigern von anderen Programmiersprachen.

  • HTML 5 offline

    Ein Offlinespeicher im Browser und ein Schuss HTML-5-Akrobatik ergeben interaktive Webanwendungen, die auch dann noch funktionieren, wenn die Internetverbindung abreißt. Als Kür zaubert das folgende Beispiel ein GUI, das auf Desktops wie Smartphones eine gute Figur macht.

  • R und Python

    Die statistische Programmiersprache R seziert eine Datenbasis nach allen Regeln der Kunst. Eingebettet in Python und unterstützt von diversen Webtechnologien bereitet sie aber auch Daten passend für den Webbrowser auf – im Beispiel solche zur Laufbahn von Kometen.

comments powered by Disqus

Ausgabe 09/2016

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.