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
Filter).
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:
-
Przygotowanie tabeli html jako bazy dla komponentu Angular Material - Table (mat-table)
-
Pobranie przez przeglądarkę danych za pomocą kontrolera Springa i załadowanie ich do mat-table
-
Stronicowane pobieranie posortowanych danych z użyciem Springa i Hibernate
-
Filtrowanie danych za pomocą tekstu wpisanego przez użytkownika
-
Dodanie eksportu danych z tabeli do plików TXT, PDF, CSV oraz Excel
Przygotowanie komponentu będzie opierało się o komponent
Table z zestawu komponentów
Angular Material.
Najpierw pobierzemy pierwszą stronę z danymi z bazy. Następnie zawsze, gdy tylko użytkownik kliknie któryś z numerów stron w komponencie stronicowania,
dana strona będzie pobierana za pomocą tej samej metody, co pierwsza strona.
Oczywiście numer strony zostanie przesłany do backendu, aby ten wiedział, które dane zwrócić.
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.
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
...
...