[4Developers 2013] Wczesne spojrzenie na jQuery UI Grid

Większość aplikacji pracujących z dużymi ilościami danych wykorzystuje gridy w swoim interfejsie użytkownika. W obecnej chwili istnieje kilka gotowych do użycia implementacji tego komponentu w JavaScriptcie, ale zespół jednej z najpopularniejszych bibliotek związanych z interfejsem użytkownika dopiero pracuje nad swoją wersją.

W ramach prezentacji przyjrzymy się w jakiej fazie implementacji znajduje się w tej chwili jQuery UI Grid i ile jeszcze przyjdzie nam na niego poczekać. Omówimy główne moduły jakie powstają w ramach tego komponentu. Następnie szerzej przyjrzymy się najbardziej kluczowemu z nich czyli „Dataview extensions”, aby ostatecznie wyświetlić przykładowe dane korzystając z obecnie dostępnej funkcjonalności.

Transcript

1. Tomasz Pęczek Senior Software Developer | http://tpeczek.blogspot.com Wczesne spojrzenie na jQuery UI Grid
2. • Pełne odświeżenie projektu do wersji 2.0 • Nowe widgety: Mask, Timepicker, Selectmenu Kod źródłowy: https://github.com/jquery/jquery-ui/tree/grid jQuery UI Roadmap
3. Obecny status jQuery UI Grid
4. • Opcje columns i rowTemplate • Autogeneracja na podstawie tabeli i opcji dataFields Definiowanie układu Grida <table id="..."> <caption>...</caption> <colgroup> <col style=..." /> ... </colgroup> <thead> <tr> <th data-property="...">...</th> ... </tr> </thead> <tbody> </tbody> </table>
5. • localDataview • odataDataview • preloaderDataview Źródło danych
6. • Konfiguracja poprzez opcję paging źródła danych • Kontrola poprzez metody page() i totalPages() • Proxy wraz z interfejsem graficznym w ramach osobnego widgetu pager Stronicowanie
7. • Kontrola poprzez opcję sort źródła danych • Prototyp proxy jest dostępny poprzez metodę .gridSort() Sortowanie
8. • Kontrola poprzez opcję filter źródła danych • Prototyp proxy jest dostępny poprzez metodę .gridFilter() Filtrowanie
9. Implementacja Dataview Extension (function($, undefined) { $.widget('ui.customDataview', $.ui.dataview, { widgetEventPrefix: 'dataview', options: { //Tutaj należy dodać wszystkie własne opcje ... //Podana tutaj funkcja zostanie wywołana //przez Dataview w celu uzyskania danych source: function (request, response) { //Parametr 'request' zawiera między innymi: //- request.paging.offset //- request.paging.limit //- request.sort //- request.filter ... //Po pobraniu/przygotowaniu danych należy wywołać funkcję //przekazaną w parametrze 'response', podając dane jako //pierwszy parametr i całkowitą liczbę wierszy jako drugi } } }); }(jQuery)); https://github.com/tpeczek/dataview-jqgrid