JS - Suchfilter-Formular dynamisch erstellen

[kekster]

Hallo allerseits,

ich bin derzeit dabei eine Kleinigkeit in PHP zu programmieren und stehe nun vor einem Problem. Ich lasse mir Datensätze aus einer SQL Tabelle anzeigen (beispielsweise Benutzer eines CMS') und möchte diese nun filtern. Um möglichst umfangreiche Filteroptionen bereit zu stellen, soll das Filter-Formular dynamisch per Javascript erzeugt werden.

Hier eine kleine Illustration, wie der Filter zB am Ende aussehen könnte: Link. (Wer einen Mac besitzt und den Automator benutzt, dem wird dieser Filter wahrscheinlich bekannt vorkommen.)

Ich denke, dass das Bild erst einmal recht Aussagekräftig ist und eine Beschreibung damit kurz ausfallen kann. Die linke Spalte entspricht der SQL Spalte, die mittlere beschreibt "wie" geprüft werden soll und die rechte Spalte gibt den Vergleichswert an.

Nun aber zum schwierigen Teil... Der Filter sieht am Anfang so aus. Per Klick auf den + Button kann der Filter jeweils weiter eingeschränkt werden. So erscheint nach dem Klick eine Zeile, in der man die erste Bedinung angeben kann. Nach weiteren +-Klicks kann man die Abfrage / den Filter immer weiter einschränken - siehe Schritt 2, Schritt 3, Schritt 4 und Schritt 5. (Ein Klick auf ein "-" würde die jeweilige Zeile wieder entfernen.)

Dank diesem wunderbaren Forum habe ich schon (in etwa) heraus gefunden, wie ich Formularelemente per JS erstellen kann. Mein Problem liegt nun darin, dass (wie man auf den Bilder gut sehen kann) jede SQL Spalte (linke Spalte) verschiedene Vergleichswerte und -operatoren hat. ID hat zB "ist", "ist nicht", "enthält" usw., währenddessen Datum nur "innerhalb" und "nicht innerhalb" hat. Genauso verhält es sich mit der rechten Spalte. Bei ID und Beschreibung (also bei Texten) genügt einfach nur ein text-input-Element. Status (siehe Schritt 4) hat jedoch ein Dropdown Menü in der rechten Spalte - Datum (äquivalent dazu) mehrere Datumsfelder. Das heißt also: Je nachdem, was ich in der linken Spalte (ID, Beschreibung, Datum usw.) auswähle, müssen sich die mittlere und rechte Spalte dementsprechend anpassen. (Welche SQL Spalten und zugehörige Vergleichsoperatoren etc. es gibt, kann per PHP Script einfach in das JS -zb in ein Array- geschrieben werden.)

Ich hoffe, man kann mich verstehen, was ich meine .
Meine Frage lauten nun: 1. Wie kann ich Formularelemente wieder entfernen (per Klick auf das "-")? 2. Wie kann ich die mittlere und rechte Spalte je nach Auswahl der linken Spalte automatisch anpassen? 3. Wie kann ich Formularelemente erstellen, so dass ich diese auch später ordentlich auswerten kann (also festgelegte Namen für die Elemente. Die Datumseingabe benötigt ja alleine schon 6 Formularelemente)?

Hmmmm... ich denke mal, das war alles .

Ich habe hier bereits einiges an Hilfe, Ratschlägen und Tips gefunden, jedoch sitze ich nun schon viele viele Stunden an dem Problem und komme einfach nicht weiter :/. Ich hoffe ihr könnt mir weiterhelfen oder mich zumindest auf ein paar nützliche Seiten verweisen. Vielen Dank schon einmal allen, die sich die Zeit genommen haben, bis hier hin zu lesen

Gruß kekster

[wahsaga]

Re: JS - Suchfilter-Formular dynamisch erstellen

Original geschrieben von kekster
1. Wie kann ich Formularelemente wieder entfernen (per Klick auf das "-")?

removeChild

2. Wie kann ich die mittlere und rechte Spalte je nach Auswahl der linken Spalte automatisch anpassen?

Entfernen, neu erstellen.

3. Wie kann ich Formularelemente erstellen, so dass ich diese auch später ordentlich auswerten kann (also festgelegte Namen für die Elemente. Die Datumseingabe benötigt ja alleine schon 6 Formularelemente)?

Denk dir was aus.

Ob du die Felder alle nur in einer Arrayschreibsweise benennst, oder ob du fortlaufende Zähler in die Namen einbaust, etc. - bleibt alles deiner Phantasie überlassen.