Ankündigung

Einklappen
Keine Ankündigung bisher.

[JS] Divs nach Datum sortieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [JS] Divs nach Datum sortieren

    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?

  • #2
    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?

    Kommentar


    • #3
      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...

      Kommentar


      • #4
        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

        Kommentar


        • #5
          @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.

          Kommentar


          • #6
            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

            Kommentar


            • #7
              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...

              Kommentar


              • #8
                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?

                Kommentar


                • #9
                  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?

                  Kommentar


                  • #10
                    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

                    Kommentar


                    • #11
                      Ok, wunderbar, neuer zwischenstand:

                      Sortieren klappt, Website neu aufbauen klappt nur teilweise. Und zwar habe ich das Problem das FF kein outerHTML annimmt, mit innerHTML klappts zwar, aber es sind eben nicht alle Infos da

                      Kommentar


                      • #12
                        Ok, fast geschafft, man das ist echt übel...

                        Jetzt hab ich nur noch ein (kleines) Problem. Sobald ich den Button zum Ändern des Datums mit verschiebe verliert der seine Funktion also man kann keinen Kalender nach dem ersten sortieren mehr aufrufen. Nehm ich den Button aus dem Sortiervorgang raus, funktioniert alles ohne Probleme. Ist halt nur ziehmlich doof wenn der Button zum Datensatz nen paar Zeilen weiter unten steht bei nem anderen Datensatz Hat jemand eine Idee?

                        Kommentar


                        • #13
                          Hm wofür brauchst du denn bitte outerHTML? Wusste gar nicht, dass es das noch gibt. Also du meinst der Button verliert sein onclick-Event? Ja das ist leider so, wenn man den DOM mit innerHTML manipuliert. Kannst du die Buttons nicht alle Buttons jeweils mit removeChild() aus dem DOM entfernen und dann mit createElement und appendChild() neu einfügen? Dann sollte es auch wieder möglich sein die events anzufügen.

                          Hm oder kannst du nicht einfach die IDs anpassen ohne überhaupt was rumzuschieben? Wenn ich das richtig verstehe ändern sich ja jeweils nur das Datum und damit die ID des Elements, das das Datum beinhaltet.

                          Kommentar


                          • #14
                            Nein nein, an der ID ändert sich ja gar nichts. Das onClick-Event wird hier anscheinend vom Kalender-Script eingefügt und wenn ich das Element neu schreibe geht es verloren, aber das wäre doch bei createElement und appendChild das gleiche oder nicht?

                            Kommentar


                            • #15
                              Nachtrag:

                              das Problem ist gelöst ich hab einfach das onclick-Event in eine Variable gepeichert und nach dem innerHTML dem Objekt wieder zugewiesen

                              Jetzt muss ich nur noch rausfinden was der Kalender an meinem Objekt noch so geändert hat, denn irgendwo muss der auch noch die Positionsdaten gespeichert haben, ne Idee wie ich das finde?

                              Gruß
                              Cy

                              Kommentar

                              Lädt...
                              X