-
-
- SMART IT
-
{{getUserDetails().email | limitToDots : 25}}
Celem kolejnego rozdziału przygotowującego do implementacji, będzie wyjaśnienie tego, jak zaprogramujemy
zaawansowany komponent do prezentacji danych w postaci widoku tabelarycznego.
Słowo "zaawansowany" nie oznacza tutaj, że jest on wyjątkowo trudny, ale raczej, że udostępnia użytkownikowi wiele ważnych funkcjonalności.
W większości aplikacji webowych właśnie w ten sposób użytkownik przegląda jakie dane zostały zapisane. Jeśli danych jest dużo, automatycznie są one dzielone na strony, które można kolejno przeglądać. Wszystkie zapisane dane można posortować. Aby szybko wyszukać interesującą nas informację, wystarczy użyć pola do filtrowania wyników (czerwona ramka z labelem Search).
Dodatkowo jest to idealne miejsce do zaimplementowania usunięcia poszczególnych wpisów (czerwona ramka z tekstem Action) oraz eksportu danych do plików (czerwona ramka z przyciskami).
Cele naszej implementacji:
Powód popularności tego rozwiązania jest prosty. Dane są przedstawione w czytelny sposób i mogą być łatwo posortowane po każdej kolumnie (przez zwykłe kliknięcie nagłówka). Oprócz tego możemy w miarę wygodnie stworzyć mechanizm generowania stron i dociągać tylko tyle danych, ile użytkownik chce zobaczyć na jednej stronie. W zasadzie każdy poważny system informatyczny przechowuje bardzo duże zbiory danych, a zdarzają się takie, które udostępniają miliony rekordów albo i więcej. Nie ma możliwości, aby pociągnąć je wszystkie od razu z serwera, bo trwałoby to strasznie długo a umieszczenie takich zbiorów danych (nawet w postaci setek elementów) na jednym ekranie, nie nadawałoby się do oglądania.
Jak działają tabelki w aplikacjach webowych albo pytając inaczej, jak zaimplementujemy tabelkę w aplikacji webowej? Skoro tabela ma pokazywać dane, to musimy je pobrać z serwera. Taką operację wykonujemy w trakcie inicjalizacji tabelki. Natomiast powszechną praktyką jest również pobranie z backendu konfiguracji kolumn. Wynika to z tego, że w przyszłości może się pojawić szereg potrzeb biznesowych, które wpłyną na to, czy tabelka będzie miała taki, czy inny zestaw kolumn. Na przykład może być tak, że w zależności od danych zalogowanego użytkownika albo grupy, do której należy, nazwy, szerokości lub inne parametry kolumn będą wyglądać inaczej. Po stronie backendu mamy dostęp do danych, na podstawie których możemy łatwo określić wygląd lub widoczność kolumn, więc umieszczenie tam ich definicji i pobranie do frontendu ma sens.
Tabelki mają jeszcze jedną, całkiem przyjemną cechę. Mimo tego, że przechowują nieraz duże ilości danych, to umożliwiają szybki dostęp do konkretnego elementu. Wszystko dzięki filtrom, które pozwalają na przykład wpisać dowolny kawałek tekstu i wyszukać dane zawierające taki fragment. Jak do tych wszystkich funkcjonalności dodamy jeszcze możliwość usuwania wybranego elementu, to już wiemy, że użytkownik otrzymuje naprawdę silne narzędzie ... ...
W większości aplikacji webowych właśnie w ten sposób użytkownik przegląda jakie dane zostały zapisane. Jeśli danych jest dużo, automatycznie są one dzielone na strony, które można kolejno przeglądać. Wszystkie zapisane dane można posortować. Aby szybko wyszukać interesującą nas informację, wystarczy użyć pola do filtrowania wyników (czerwona ramka z labelem Search).
Dodatkowo jest to idealne miejsce do zaimplementowania usunięcia poszczególnych wpisów (czerwona ramka z tekstem Action) oraz eksportu danych do plików (czerwona ramka z przyciskami).
- Przygotowanie tabeli html jako bazy dla komponentu datatable
- Zdefiniowanie kolumn po stronie serwisu w Springu
- Pobranie przez przeglądarkę listy kolumn za pomocą kontrolera Springa
- Stronicowane pobieranie posortowanych danych z użyciem Springa i Hibernate
- Konfiguracja komponentu datatable po stronie interfejsu użytkownika
- Włączenie opcji eksportu danych z tabeli do plików PDF, CSV oraz Excel
Starter
Tabelka jest bardzo wygodnym i często stosowanym rozwiązaniem do przeglądania danych w aplikacjach webowych. Nie będzie na pewno kłamstwem stwierdzenie, że w każdym projekcie, w którym dotychczas pracowaliśmy była stworzona co najmniej jedna tabelka. Zdarzały się aplikacje, gdzie było ich nawet kilka.Powód popularności tego rozwiązania jest prosty. Dane są przedstawione w czytelny sposób i mogą być łatwo posortowane po każdej kolumnie (przez zwykłe kliknięcie nagłówka). Oprócz tego możemy w miarę wygodnie stworzyć mechanizm generowania stron i dociągać tylko tyle danych, ile użytkownik chce zobaczyć na jednej stronie. W zasadzie każdy poważny system informatyczny przechowuje bardzo duże zbiory danych, a zdarzają się takie, które udostępniają miliony rekordów albo i więcej. Nie ma możliwości, aby pociągnąć je wszystkie od razu z serwera, bo trwałoby to strasznie długo a umieszczenie takich zbiorów danych (nawet w postaci setek elementów) na jednym ekranie, nie nadawałoby się do oglądania.
Jak działają tabelki w aplikacjach webowych albo pytając inaczej, jak zaimplementujemy tabelkę w aplikacji webowej? Skoro tabela ma pokazywać dane, to musimy je pobrać z serwera. Taką operację wykonujemy w trakcie inicjalizacji tabelki. Natomiast powszechną praktyką jest również pobranie z backendu konfiguracji kolumn. Wynika to z tego, że w przyszłości może się pojawić szereg potrzeb biznesowych, które wpłyną na to, czy tabelka będzie miała taki, czy inny zestaw kolumn. Na przykład może być tak, że w zależności od danych zalogowanego użytkownika albo grupy, do której należy, nazwy, szerokości lub inne parametry kolumn będą wyglądać inaczej. Po stronie backendu mamy dostęp do danych, na podstawie których możemy łatwo określić wygląd lub widoczność kolumn, więc umieszczenie tam ich definicji i pobranie do frontendu ma sens.
Tabelki mają jeszcze jedną, całkiem przyjemną cechę. Mimo tego, że przechowują nieraz duże ilości danych, to umożliwiają szybki dostęp do konkretnego elementu. Wszystko dzięki filtrom, które pozwalają na przykład wpisać dowolny kawałek tekstu i wyszukać dane zawierające taki fragment. Jak do tych wszystkich funkcjonalności dodamy jeszcze możliwość usuwania wybranego elementu, to już wiemy, że użytkownik otrzymuje naprawdę silne narzędzie ... ...
Wstecz
Polub nas na
Facebooku:
Kliknij O nas .
Pozycjonowanie stron: Grupa TENSE