template

Index :: Javascript :: Module :: Tabelle sortieren (tblsort.js)

• Interne Funktionsweise
• Erzeugung
• Verwendung
• Interaktive Kopfzeile bereitstellen
• Eigenschaften und Methoden
• Modul-Quellcode

Interne Funktionsweise

• In einer ersten Schleife werden alle TBODY-Kindknoten durchlaufen. Trifft man auf einen TR-Knoten, dann wird sein N-ter TD-Kindknoten ermittelt (N = Position der zu sortierenden Spalte). Im TD-Knoten wird dann der erste Textknoten gesucht. Schließlich werden der TR-Knoten und der (gemäß Spaltentyp passend formatierte) Inhalt des Textknotens als Komponentenpaar ins Hilfs-Array aufgenommen.
• Nun wird das Hilfs-Array sortiert, wobei man der sort-Methode eine eigene Callback-Funktion übergibt. Letztere verwendet abhängig von Spaltentyp und Richtung die passende Vergleichsmethode (alphabetisch/numerisch, aufsteigend/absteigend) für die Zellendaten-Komponente, wodurch die TR-Knoten-Komponente automatisch mitsortiert wird.
  
• In einer zweiten Schleife werden dann die Elemente des Hilfs-Arrays durchlaufen und die TR-Knoten-Komponenten mittels appendChild() jeweils ans Ende der TBODY-Kinderliste gesetzt. Dies bewirkt ein sukzessives Verschieben von Tabellenzeilen - mit dem Effekt, dass die gewünschte Reihenfolge aufgebaut wird.
  Bei manchen Browsern (z.B. beim Konqueror) wird durch appendChild() das betreffende Element kopiert, und die Kopie wird dann ans Ende der Kinderliste gesetzt; d.h. der Originalknoten bleibt erhalten. Da wir diesen Verdoppelungseffekt hier nicht gebrauchen können, müssen wir das Element vor dem Anhängen erst einmal herauslösen. Dazu benutzen wir die removeChild()-Methode, die uns den entfernten Knoten zurückliefert.

Erzeugung

var tsort = new TableSort(tabelle);

var tsort = new TableSort(tabelle, 1); // mit einer Kopfzeile

var tsort = new TableSort(tabelle, 0, [0,1,1,1]); // Spalten: 1 x Text, 3 x Zahl

Verwendung

var tsort = new TableSort(tabelle);
tsort.Execute(1); // nach Spalte 1 sortieren
...
tsort.Execute(2, false); // nach Spalte 2 absteigend sortieren
...
tsort.Execute(3); // nach Spalte 3 (immer noch absteigend) sortieren
...
tsort.Execute(1, true); // wieder nach Spalte 1 aufsteigend sortieren

Interaktive Kopfzeile bereitstellen

img/i4Dn.gif		Symbol für aufsteigend
img/i4Up.gif		Symbol für absteigend

Javascript im Header
function HeadClick(pCol) {
  if (!tsort) return; var c=tsort.ColPos();
  if (c) document.getElementById('imH'+c).src='img/i1Spc.gif'; //aktuelles Symbol ausblenden
  tsort.Execute(pCol,(pCol==c)^tsort.Ascend()); //Sortieren (Richtung umkehren, falls selbe Spalte)
  document.getElementById('imH'+pCol).src='img/i4'+(tsort.Ascend()?'Dn':'Up')+'.gif'; //neues Symbol einblenden
}

Weiter unten, im BODY, die Tabelle:
<table id='tsort'>
<tr>
<td onClick='HeadClick(1)'>Vorname <img id='imH1' src='img/i1Spc.gif'></td>
<td onClick='HeadClick(2)'>Nachname <img id='imH2' src='img/i1Spc.gif'></td>
<td onClick='HeadClick(3)'>Abteilung <img id='imH3' src='img/i1Spc.gif'></td>
</tr>

Hier folgen die Datenzeilen, z.B.
<tr>
<td>Dagobert</td>
<td>Duck</td>
<td>Gesch&auml;ftsleitung</td>
</tr>
... weitere Zeilen ...
</table>

Danach: Javascript zur Initialisierung
var tsort=new TableSort(document.getElementById('tsort'), 1);

Eigenschaften und Methoden

Modul-Quellcode

TableSort = function(oTable,nHead,aTyp) {
  oTable=oTable.firstChild; nHead=nHead||0; aTyp=aTyp||[];
  var myCol=0,myUp=true,myArr;

  function txnode(o) { var tn,i=0;
    while (oc=o.childNodes[i++]) {
      if (oc.nodeType==3) { if (oc.data.replace(/\s+| /g,'').length) return oc; }
      else if (tn=txnode(oc)) return tn; }
    return null; }
  function cellcontent(oTr) { var s='',i,td,o,oc;
    for (i=td=0;o=oTr.childNodes[i];i++)
      if (o.nodeName=='TD'&&++td==myCol) {
        if (oc=txnode(o)) s=oc.data.replace(/\s+| /g,''); break; }
    switch (aTyp[myCol-1]) {
      case 1: return isNaN(s=parseFloat(s))?0:s;
      case 2: return isNaN(s=parseFloat(s.replace(/\./g,'')))?0:s;
      case 3: return s.substr(6,4)+s.substr(3,2)+s.substr(0,2)+s.slice(10);
      default: return s.toLowerCase().replace(/ä/g,'a').replace(/ö/g,'o').replace(/ü/g,'u').replace(/ß/g,'s'); }}
  function compare(a,b) {
    switch (aTyp[myCol-1]) { case 1: case 2: return myUp?a[1]-b[1]:b[1]-a[1];
      default: return myUp?a[1]<b[1]?-1:a[1]>b[1]?1:0:b[1]<a[1]?-1:b[1]>a[1]?1:0; }}
  function initarr(bPur) { var i,tr,o; myArr=[];
    for (i=tr=0;o=oTable.childNodes[i];i++) if (o.nodeName=='TR') { 
      if (tr++<nHead) continue; myArr[myArr.length]=bPur?o:[o,cellcontent(o)]; }}
  function invert() { initarr(1); var i=myArr.length-1;
    while (i--) oTable.appendChild(myArr[i]); myArr=[]; }

  this.ColPos = function() { return myCol; }
  this.Ascend = function() { return myUp; }
  this.Execute = function(col,up,force) { if (col<1) return; if (up==undefined) up=myUp;
    if (col==myCol&&!force) { if (myUp==!!up) return; myUp=!myUp; invert(); return; }
    myCol=col; myUp=!!up; initarr(); myArr.sort(compare);
    for (var n=myArr.length,i=0;i<n;i++) oTable.appendChild(oTable.removeChild(myArr[i][0])); myArr=[]; }
}

Index :: Javascript

template