« Immutable Collections | Main| SDLC - Tagebuch (Letzter) »

DHTMLX und Grid und Filter ...

9
Category   
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 ....
ABC
123
ABC
456
.


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 ->
ABC
123
ABC
456
.


Nicht so wirklich schön, also Höhe und Breite im table-tag mit style='width:280px;height:120px' angeben....

ABC
123
ABC
456


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/')

ABC
123
ABC
456


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:
ABC
123
ABC
456


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!

Post A Comment

:-D:-o:-p:-x:-(:-):-\:angry::cool::cry::emb::grin::huh::laugh::lips::rolleyes:;-)

Amazon


Impressum

Firmenname: Peanuts-Soft
Straße Nummer: Biinger Strasse 8
PLZ Ort: 55263 Wackernheim
Telefon: +491772134526
E-Mail: joerg.reck @ peanuts-soft.de
Disclaimer: Peanuts-Soft übernimmt keine Garantie dafür, dass die auf dieser Website bereitgestellten Informationen vollständig, richtig und stets aktuell sind. Dies gilt auch für alle Links, auf die verwiesen wird. Peanuts-Soft ist für die Inhalte, auf die per Link verwiesen wird, nicht verantwortlich. Peanuts-Soft haftet nicht für konkrete, mittelbare und unmittelbare Schäden oder Schäden, die durch fehlende Nutzungsmöglichkeiten, Datenverluste oder entgangene Gewinne – sei es aufgrund der Nichteinhaltung vertraglicher Verpflichtungen, durch Fahrlässigkeit oder eine andere unerlaubte Handlung – im Zusammenhang mit der Nutzung von Dokumenten oder Informationen bzw. der Erbringung von Dienstleistungen entstehen, die auf dieser Web Site zugänglich sind.
Datenschutz: Inhalt und Gestaltung der Internetseiten sind urheberrechtlich geschützt. Eine Vervielfältigung der Seiten oder deren Inhalte bedarf der vorherigen schriftlichen Zustimmung von Peanuts-Soft.


Locations of visitors to this page

Powered By

Domino BlogSphere
Version 3.0.2