Ed X: Der sample-source zum vorgängerthread

Beitrag lesen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <title>Baumerzeuger von Ed X</title>
 <script>
 // Das ist Samplecode, der noch im Betastadium ist
 // brought to you by tobias kieslich, www.justdreams.de
 /* #############################################################################
  das sind Variablen, wie du solche Daten aus der DB kriegst, musst du selber
  wissen ;-)
 ############################################################################# */
 var thread = new Array(
    "ich bin der Vater",
    "ich bin der 1. Sohn",
    "ich bin der 2. Sohn",
    "ich bin der 3. Sohn",
    "ich bin der 4. Sohn",
    "ich bin der 5. Sohn",
    "ich bin der 6. Sohn",
    "ich bin der 7. Sohn",
    "ich bin der 8. Sohn",
    "ich bin der 9. Sohn",
    "ich bin der 10. Sohn",
    "ich bin der 11. Sohn",
    "ich bin der 12. Sohn",
    "ich bin der 13. Sohn",
    "ich bin der 14. Sohn",
    "ich bin der 15. Sohn",
    "ich bin der 16. Sohn",
    "ich bin der 17. Sohn",
    "ich bin der 18. Sohn",
    "ich bin der 19. Sohn",
    "ich bin der 20. Sohn",
    "ich bin der 21. Sohn",
    "ich bin der 22. Sohn",
    "ich bin der 23. Sohn",
    "ich bin der 24. Sohn",
    "ich bin der 25. Sohn (EOF)")

// hier drinne werden die Bezuege gespeichert, also thread[14] bezieht sich auf referer[14], alles klar?
 var referer= new Array (-1,0,0,2,0,3,5,1,4,2,9,9,0,6,2,13,15,10,16,2,18,20,21,19,22,19);
 /* #############################################################################
  damit wird der Baum erzeugt
 ############################################################################# */
 function buildStructure() {
  var structure  = [];    // das 2 dimensionale array zur Ermittlung der Reihenfolge
  for (var i=0; i<thread.length; i++) { // vorbereiten der arrays
   structure[i] = [];    // initialisieren des leeren structure-Arrays
   structure[i][0] = i;    // jedes einzelne Array hat als 0. Wert seine Ordnungsnummer
  }

// diese einfache Schleife ermittelt die Reihenfolge der anzuzeigenden threads
 // durch Anhaengen des jeweiligen Arrays an seinen Referer
  for (var k=thread.length-1; k>0; k--) {
   structure[referer[k]] = structure[referer[k]].concat(structure[k]);
  }

// erzeuge einen order-Array um Uebersicht zu behalten
  var order = structure[0];

// Testweise Ausgabe der Reihenfolge
  alert(structure[0]);

// erzeuge eine mitlaufende Variable, die sich die aktuelle Einruecktife merkt
  var level  = 0;

// tree ist an dieser Stelle normalerweise leer; der besseren Lesbarkeit halber
 // habe ich mal ein paar stylesheets spendiert
  tree = "<style>\n ul {font: 12px Arial,Helvetica,sans-serif; color: #000000;}\n span.name{font: bold 13px Arial,Helvetica,sans-serif; color: #cc6600;}\n span.referer {font: bold 13px Arial,Helvetica,sans-serif; color: #6600cc;}\n span.tiefe {font: bold 13px Arial,Helvetica,sans-serif; color: #009900;}</style>\n\n";

// diese schleife zeichnet fuer die Zusammenstellung des HTML-codes verantwortlich
  for (var i=0; i<thread.length; i++) {

// listeneintrag erzeugen - nicht schliessen !!
   tree += "<ul><span class="name">" + thread[order[i]] + "</span> - bezieht sich auf: <span class="referer">" + referer[order[i]] + "</span> -  Tiefe: <span class="tiefe">" + level + "</span><br>\n";

// Ausnahme wenn der Nachfolgende in der Reihenfolge sich nicht auf Aktuellen bezieht,
    // muessen schliessende </ul>'s erzeugt werden, die Frage ist wieviele?
   if ((i+1 != thread.length) && (referer[order[i+1]] != order[i])) {

// in diese Variable schreiben wir den ermittelten level des folgenden threads,
     // denn die differenz des aktuellen level zum level des folgenden ergibt die
     // Anzahl der schliessenden </ul>'s; nextlevel wird hier vorerst nur initialisert
    var nextlevel = 0;

// Ab hier ermitteln wir den level des naechsten Sohns. Wie? Wir erfragen den referer
     // des naechsten Sohns, dann erfragen wir den referer von dem und so weiter bis wir beim
     // Vater sind (referer-Wert = -1), jedes mal zaehlen wir dabei den nextlevel wert einen hoch
    var next = referer[order[i+1]];
    while (next != -1) {
     nextlevel++;
     next = referer[next];
    }

// Aus der differenz von level-nextlevel ergibt sich die Anzahl der schliessenden </ul>'s
     // mittels einer for schleife wird das an "tree" angehangen
    for (var c=0; c<=(level-nextlevel); c++) {
     tree += "</ul>\n";
    }

// Aktueller level ist natuerlich der des naechsten sohns
    level=nextlevel;
   } else {
     // wenn wir die prozedur nicht brauchen, muss der level um 1 erhoeht werden,
     // da ja ein neuer <ul> aufgemacht wurde
    level++;
   }
  }
   // Zum Schluss alle offenen <ul>'s schliessen !!
  for (var c=0; c<level; c++) {
   tree += "</ul>\n";
  }

// Ausgabe
  document.open;
  document.write(tree);
  document.close;
 }
 </script>
</head>

<body onload="buildStructure()">
</body>
</html>