DHTMLX und Grid und Filter ...
Kategorie Allgemein HTML DHTMLX
Wenn man eine einfache HTML-Tabelle hat, kann man diese mittels CSS einfach und bequem schön machen.
Wenn der Kunde sortieren und filtern möchte, sieht es schon etwas anders aus ..... hier eine kurze Beschreibung,
wie man mittels dem DHTMXGrid schnell und einfach filtern kann ....
Wenn man eine einfache HTML-Tabelle hat, kann man diese mittels CSS einfach und bequem schön machen.
Wenn der Kunde sortieren und filtern möchte, sieht es schon etwas anders aus ..... hier eine kurze Beschreibung,
wie man mittels dem DHTMXGrid schnell und einfach filtern kann ....
| A | B | C | 1 | 2 | 3 | A | B | C | 4 | 5 | 6 |
Einfache Tabelle erstellt, als erstes werden nun die folgenden Scripts/CSS eingebunden ->
/dhtmlx/codebase/dhtmlxgrid.css
/dhtmlx/codebase/dhtmlxcommon.js
/dhtmlx/codebase/dhtmlxgrid.js
/dhtmlx/codebase/dhtmlxgridcell.js
/dhtmlx/codebase/ext/dhtmlxgrid_start.js
/dhtmlx/codebase/ext/dhtmlxgrid_filter.js
Richtig, ich habe das dhtmlx package auf meinem WebServer in das Verzeichnis /DHTMLX entpackt, wenn man ein anderes wählt, muß man den Pfad ändern....
Danach die Tabelle mit einer id versehen, z.B. -> id = "tablegrid"
Am Ende der Tabelle, nach dem table-closing-tag, folgendes script einfügen ->
var grid = dhtmlXGridFromTable('tablegrid');
Resultat ->
| A | B | C | 1 | 2 | 3 | A | B | C | 4 | 5 | 6 |
Nicht so wirklich schön, also Höhe und Breite im table-tag mit style='width:280px;height:120px' angeben....
| A | B | C | 1 | 2 | 3 | A | B | C | 4 | 5 | 6 |
Wenn man nun auf die Spaltenüberschrift klickt, kann man zwar sortieren, jedoch werden die Bildchen nicht korrekt angezeigt,
hierzu zusätzlich den ImagePath setzen ->
grid.setImagePath('/dhtmlx/codebase/imgs/')
| A | B | C | 1 | 2 | 3 | A | B | C | 4 | 5 | 6 |
Nun können wir Filter in den Spaltenüberschriften hinzufügen
grid.attachHeader('#select_filter,#text_filter,#text_filter')
Wobei die folgenden Filtertypen existieren:
text_filter
select_filter
combo_filter
text_search
numeric_filter
So sieht es aus:
| A | B | C | 1 | 2 | 3 | A | B | C | 4 | 5 | 6 |
Viel Spaß hier die Documentation.
Gruß JJR
P.S.: Falls im Browser die Filter nicht gleich angezeigt werden, einfach einmal auf die Spaltenüberschrift klicken!
| Permalink | 
