RkBlog

Hardware, programming and astronomy tutorials and reviews.

Zarządzanie danymi tabelarycznymi za pomocą dhtmlxGrid

Prosta aplikacja Django zarządzająca danymi tabelarycznymi za pomocą grida dhtmlxGrid stworzonego przez DHTML eXtensions.

DHTML eXtensions, czyli DHTMLX to zbiór gotowych JavaScriptowych frontendów i widżetów taki jak drzewa, layouty, gridy, comboboxy, okna i inne. Na stronie projektu znajdziemy przykłady i opisy wszystkich komponentów. Pakiet dostępny jest w dwóch wersjach - GPL dla projektów na tej samej otwartej licencji, oraz w płatnej wersji komercyjnej z większymi możliwościami. Darmowa wersja posiada dość spory zasób możliwości pozwalających stworzyć funkcjonalne interfejsy w naszych aplikacjach. W odróżnieniu widżetów Ext.js, czy jQuery otrzymujemy prosto z pudełka bardziej kompleksowy widżet, który posiada gotowy interfejs do funkcjonalności server-side (choć i w jQuery można dojść do tego samego).

dhtmlxGrid

dhtmlxGrid to JavaScriptowy grid do zarządzania i prezentacji danych tabelarycznych. Posiada gotowe rozwiązania do obsługi dużych kolekcji danych ładowanych porcjami poprzez żądania Ajax w formatach takich jak XML, JSON, CSV, tablice JS i tabele HTML. Na stronie dhtmlx znajdziemy dokumentację oraz liczne przykłady.

grid1

Szybki start z dhtmlxGrid

Poniższy przewodnik pokaże jak wykorzystać grida na statycznej stronie HTML - jak go skonfigurować i jak można go rozbudowywać.

dhtmlxGrid i Django

Stosując dhtmlxGrid w aplikacji Django, GAE itp. nie trafimy na jakieś specjalne problemy i przypadki. Widoki zwracające dane w postaci dokumentów XML muszą także stosować poprawny typ MIME. Wystarcz dodać do np. render_to_response:
mimetype='text/xml'
Mając już opanowane podstawy xgrida możemy stworzyć prostą aplikację Django wykorzystującą możliwości tego widżetu do obsługi dużych kolekcji danych wraz z ich edycją.

Dynamiczne ładowanie wierszy

Mając w bazie tysiące i więcej rekordów nie da się ich załadować do grida w jednej operacji. dhtmlXgrid posiada mechanizm pobierania grupy wierszy na żądanie. Wywołuje on wtedy URL /get_data/ (URL dokumentu danych) z dwoma parametrami GET: posStart i count. Pierwszy oznacza offset od pierwszego rekordu, a drugi ilość wierszy jakiej potrzebuje.
grid3

dataprocessor do edycji wierszy

W skład komponentów dhtmlx wchodzi dataprocessor - pośrednik między gridem a językami server side. Pozwala on na obsługę edycji, kasowania, czy dodawania wierszy. Dla przykładu dodamy możliwość edycji wierszy za jego pomocą. Po włączeniu dataprocessora po edycji wiersza na wskazany URL automatyczne zostaną wysłane dane zmodyfikowanego wiersza (jako parametry GET):
?gr_id=6&c0=abc&c1=dsdsd&c2=6&c3=1234&c4=this%20is%20Sparta!
Gdzie gr_id to ID wiersza, a c0-c* to wartości kolejnych komórek. Nasza przykładowa aplikacja jest gotowa.

Kod Źródłowy

RkBlog

12 December 2009;

Comment article