cycap

Hallo Leute,

ich möchte gerne per JS ein paar Divs nach beinhaltendem Datum/Zeit sortieren:

<div id="datensatz123"><span class="dat">2008-01-01 12:00:00</span> eins</div>
<div id="datensatz200"><span class="dat">2008-01-01 13:00:00</span> zwei</div>
<div id="datensatz100"><span class="dat">2008-01-01 14:00:00</span> drei</div>

Das Datum hier wird per jscalendar vom User geändert und ich möchte onchange eine Sortierfunktion ausführen die mir die Divs nach Datum sortiert.

Hat jemand eine Idee wie man das umsetzten könnte?

Mister Ad

dex

Werden die "div's" aus der Datenbank jedes mal neu aussortiert?
Ist es überhaupt Datenbankkompatibel?

Ich habe nicht so recht verstanden, was du mit "onchange sort" meinst, aber ich denke folgendes:
Du möchtest die Einträge sortieren solange man sie bearbeitet, also sobald ein Datum geändert wurde, soll er an die richtige "Stelle" rutschen?

cycap

Im Hintergrund kommen die Daten natürlich aus ner Datenbank und ich habe das ganze auch nur vereinfacht hier dargestellt, weil das nichts zur Sache tut.

Im Prinzip will ich einfach nur wenn (aus dem obigen Beispiel) die dritte Uhrzeit auf 11 Uhr geändert wird das der dann ganz nach oben rutscht, ohne irgendwelche Interaktion mit dem Server, einfach nur zur Darstellung.

Und meine Idee war halt das ich einfach bei jeder Änderung (onchange des Kalenders) alle Divs sortiere.

Man könnte natürlich auch den geänderten nehmen und schauen wo seine neue Position sein soll...

dex

Eine Alternative zum Datumsortieren ist, den Terminen (div's) einfach eine Nummer zuzuweisen. Das könnte dann auch mit onchange funktionieren.

Also, die einfachste bildliche Vorstellung ist ein <select> bei dem man den Termin auswählen kann und dann bearbeiten...
Funktioniert mit Javascript auf jeden fall, da kannst du ja mal recherchieren.

Würde ich als (vermutlich einzigste) akzeptable Alternative sehen!

Leider kenn ich mich mit Javascript nur in bestimmten Ecken aus, aber vom Plan her würde ich dir nicht empfehlen, die div's sortieren zu lassen, solange du an ihnen rumschraubst. Da können tolle Effekte auftreten

cycap

@dex:

Ich weiss nicht ob du mich richtig verstanden hast, ich versuchs mal so:

Die Daten kommen sortiert aus der Datenbank. Der User ändert ein Datum und ich will dem User zeigen was das für Auswirkungen auf die Reihenfolge hat BEVOR er speichert.

dex

Nein, ich hatte dich leider nur teilweise verstanden :3

Nun gut, machbar ist das, nur ein Problem bleibt: OnChange sortiert dann bei jedem Buchstaben/jeder Ziffer, die du eingibst.
Das kann zu erheblichen Browserproblemen und bis zur Browsertermination führen x)

Whatever...
Auf jeden Fall ist eine Javascript funktion nötig, die bei OnChange ausgeführt wird, soviel hab ich schonmal verstanden. Dazu sollten die div's eine ID bekommen, um deine Funktion bescheid zu sagen, welcher div gerade verändert wird... "getElementByID"... wenn du die dann hast, könntest du das Datum dieses div's herausfinden ... dann wäre allerdings OnExit auch noch fällig...

Alles in allem eine sehr komplizierte angelegenheit, die sehr aufwendig werden würde...

Wie bist du darauf gekommen so eine Darstellung machen zu wollen?
Ich such mal weiter nach Alternativen... diese ist mir, ganz ehrlich, zu kompliziert

cycap

Das mit den Browserproblemen sollte nicht passieren können, denn das Datum wird ja per klick in einem Kalender geändert, dieser Kalender hat eine eigene onChange-Funktion. Es können also nur gültige Werte in das Feld kommen.

Den Divs Ids zu geben ist ja kein Problem. Das Problem liegt momentan einzig und allein darin, die richtige Reihenfolge zu finden und die Seite dann auch so umzubauen...

Montellese

Also wenn der Kalender eine onchange-Funktion hat, musst du da rein und alle Werte der DIVs auslesen. Die dann zwischenspeichern und mit regulären Ausdrücken oder mit slice() in Jahr, Monat, Tag, Stunde, Minute und Sekunde auftrennen. Dann mit Vergleichen halt die Reihenfolge rausfinden.
Und dann bleibt nur noch die richtige Anordnung der DIV-Elemente. Wie das gemacht werden kann, hängt vom restlichen Code um die DIVs ab. Wenn da z.B. <td>'s sind, kannste die ja in einem Container-Array der Reihe nach abspeichern. Dann musst du die DIVs nur komplett da reinkopieren oder aus dem DOM an der alten Position löschen und an der neuen Position wieder einhängen.

Was ist also die genaue Frage? Bestimmte Code-Fragmente? Die Grund-Idee?

cycap

Meine Frage war rein konzeptionell.

Ich habs jetzt so weit das ich ne Funktion habe, an die kann die ID des Divs übergeben und die liefert mir ne Zahl zurück, z.b. 20080101120000.

Nur wie Sortiere ich die jetzt ohne die Referenz zu verlieren? In PHP würde ich einfach ein Array machen und darin rumsortieren. In JS fehlen mir aber die Funktionen dazu

Wenn das sortieren geschehen ist würde ich dann einfach wieder ein Array machen, in dem das HTML der Zeilen steht. Dann den großen Div drumherum mit innerHTML neu befüllen. Ist die Idee so ok oder gibts bessere alternativen?

Montellese

Bei JavaScript muss man zum Sortieren bissl selber was leisten, siehe hier SELFHTML: JavaScript / Objektreferenz / Array.
Die Referenz verlierst du nicht, indem du z.B. noch ein assoziatives Array machst, in dem du die Zahl (als String) als Index verwendest und als Value die ID des entsprechenden DIVs speicherst. Dann kannst du nach dem Sortieren einfach über den Index drauf zugreifen.

Den Rest würde ich gleich machen, wie du es beschrieben hast. Ausser du willst auf innerHTML verzichten und alles mit createElement oder so machen. Bin ich manchmal aber auch zu faul zu