Tabele przestawne z AngularJS

Jak dobrze wiemy, AngularJS zapewnia nam wiele interesujących narzędzi podczas pracy nad rozwojem aplikacji webowych i mobilnych, jest tak wiele zalet, że pomaga nam generować dużą dynamikę w naszych projektach internetowych.

Dzisiaj nauczysz się tworzyć dynamiczną tabelę za pomocą tego frameworka, za pomocą którego możesz manipulować dowolnym typem rekordów, które masz w swoim rozwoju, wystarczy pracować z osobnymi modułami w zależności od informacji, które obsługujesz, możesz to wszystko pracować z czegoś, co jest zakodowany tylko raz. Dzięki niemu będziesz mógł przeglądać, filtrować, stronicować, sortować, tworzyć, edytować i usuwać informacje, które zapisałeś w systemie. W tej pierwszej części zajmiemy się wszystkim, co dotyczy zapytań (lista, filtrowanie, stronicowanie, sortowanie), w drugiej części zajmiemy się tworzeniem, edycją i eliminacją rekordów.

W swoim czasie zrobiliśmy już samouczek dotyczący tworzenia tras nieamicznych za pomocą AngularJS Ngroute. Dziś wchodzimy w to w pełni na inne sposoby. Należy również wyjaśnić, że wskazane jest posiadanie Znajomość AngularJSPonieważ niektóre szczegóły tego frameworka nie zostaną w pełni wyjaśnione, zaleca się również (nie jest to obowiązkowe) zainstalowanie GIT, NPM w naszym systemie, ponieważ będziemy z nimi pracować w tym samouczku.

Tworzenie projektu

Najpierw uporządkujmy nasz projekt za pomocą npm, git i bower. Utwórz katalog projektu o nazwie table-angular, a następnie wewnątrz projektu użyj polecenia `git init`, aby utworzyć repozytorium, a następnie użyj polecenia ` npm init`, aby utworzyć plik package.json.

Instalujemy nasz serwer WWW za pomocą polecenia `npm install --save-dev express`. Po instalacji tworzymy plik o nazwie serwer.js

 var express = wymagają ('ekspresowe'); var aplikacja = ekspres (); var port = liczba (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('Aplikacja uruchomiona na http: // localhost:' + port);}); 

Teraz wykonujemy polecenie (Aby zainstalować altanę):

 npm install --save-dev bower

Wewnątrz katalogu głównego tworzymy inny o nazwie public, publicznie tworzymy plik index.html. Następnie tworzymy katalog wewnątrz public o nazwie asset, wewnątrz tego katalogu tworzymy kolejny o nazwie js, w którym utworzymy pliki app.js, kontroler.js, services.js Tak filtry.js. Następnie tworzymy katalog o nazwie css, w którym tworzymy plik o nazwie main.css

Jak dotąd nasz projekt przebiega następująco:

Kontynuujemy korzystanie z naszych bibliotek. W tym przypadku użyjemy altany, użyjemy bibliotek kątowych i fundamentowych, aby nadać naszemu poglądowi nieco stylu. Dodamy również bibliotekę o nazwie angular-utils-pagination, która zapewni nam funkcjonalność z paginacją w naszym projekcie. Przed zainstalowaniem tych bibliotek utworzymy w naszym katalogu głównym plik o nazwie .bowerrc, który informuje Bowera, gdzie zapisać te biblioteki.

Więcej informacji o każdej z bibliotek, z których będziemy korzystać:

.Kod Bowerrc

 {"directory": "public / asset / bower_components"}

Aby zainstalować biblioteki użyjemy poleceń:

• `bower install --save angle`
• `bower install --save Foundation`
• `bower install --save angular-utils-pagination`

Należy doprecyzować, że fundacja działa z jquery i są one pobierane gdy używamy bower, ale dla naszego projektu nie będziemy ich używać, co możemy je pominąć, w moim przypadku usunę je z katalogu bower_components.

Oto co stworzyliśmy do tej pory:

Przechodzimy teraz kodowanie tabeli przestawnej 😁, zaczynamy od index.html, dołączamy wszystkie potrzebne biblioteki.

 Stół obrotowy z Angular JS 

W controller.js tworzymy kontroler o nazwie TableController, który będzie wywoływany z index.html

Kod Controller.js

 angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); 

Dla filter.js tworzymy tylko instancję modułu, na razie:

 angular.module ('table.filters', []);

To samo robimy z services.js, po prostu tworzymy instancję:

 angular.module ('table.services', []);

Na koniec wywołujemy wszystkie moduły z app.js.

 angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);

A dzięki temu możemy dokonać pierwszego uruchomienia naszej aplikacji za pomocą polecenia:

 `node server.js`

Jeśli użyjemy narzędzia programisty przeglądarki w zakładce konsoli, możemy sprawdzić, czy słowo Kontroler tabeli zostało wydrukowane, aby wskazać, że wszystko, co do tej pory stworzyliśmy, działa poprawnie.

Dodawanie usług

Zaczniemy od stworzenia naszych usług, z których będziemy korzystać. W samouczku nie będziemy łączyć się z żadnym zdalnym serwerem, więc zdecydujemy się zapisać rekordy w naszych plikach javascript. Wykorzystamy trzy rodzaje rejestrów. Gry, Artykuły i Użytkownicy, którzy nie dzielą tych samych pól, każdy z nich będzie symulował niezależną usługę, jakby pochodził z REST API, wszystko w formacie JSON. Jeśli chcesz, możesz dodać inne pola do tych trzech typów lub dodać nowe.
Kod Services.js

 .factory ('Użytkownicy', function () {return {get: function () {var data = [{id: 1, imię:' Juan ', nazwisko:' Perez '}, {id: 5, imię :' Ana María ', nazwisko:' Garcia '}, {id: 15, imię:' Alejandro ', nazwisko:' Magno '}, {id: 18, imię:' Andrea ', nazwisko:' L '}, {id: 19 , imię: 'Pablo', nazwisko: 'Gutierrez'}, {id: 8, imię: 'Ana', nazwisko: 'H'},]; zwróć dane;} }}) .factory ('Artykuły', function ( ) {return {get: function () {var data = [{id: 20, tytuł: 'Mój pierwszy artykuł', podsumowanie: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'}, {id: 21, tytuł: 'Mój drugi artykuł', streszczenie: 'Lorem ipsum pain sit amet, consectetur adipisicing elit.'}, {Id: 22, tytuł: 'Mój trzeci artykuł', streszczenie: ' Lorem ipsum pain sit amet, consectetur adipisicing elit.'} ]; return data;}}}) .factory ('Games', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', gatunek: 'Akcja'}, {id: 2, tytuł: 'Zelda', gatunek: 'Przygoda'}, {id: 3, tytuł: 'Złote Oko', gatunek: 'S hooter '}, {id: 4, tytuł: 'Fifa 2016', gatunek: 'Sport'},]; dane zwrotne; }}}) 

Dołączymy również inną usługę o nazwie Call, która będzie odpowiedzialna za wywoływanie różnych danych (Użytkownicy, Gry i Artykuły).

 .factory ('Call', function ($injector) {return {get: function (type) {var service = $injector.get (type); return service.get ();}};}) 

I wreszcie stworzymy usługa o nazwie Trwałość kto będzie odpowiedzialny za to CRUD naszych informacji. Jak już powiedziałem na początku, w tej pierwszej części samouczka będziemy wykonywać tylko funkcje zapytań, więc wykorzystamy tylko funkcję list, w drugiej części wykorzystamy resztę.

 .factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (typ);}, update: function (typ, indeks, dane) {zmienna Obj = Call.get (typ); return Obj [indeks] = dane;}, get: function (typ, indeks) {zmienna Obj = Call.get (typ); return Obj [indeks];}, destroy: function (typ, indeks) {var Obj = Call.get (typ); return Obj.splice (indeks, 1);}};} ) 

Musimy dodać usługę, która obsłuży wszystkie obiekty w tabeli przestawnej.

 .factory ('ObjectService', function () {return {getPropertiesObject: function (object) {właściwości var = []; for (właściwość var ​​w obiekcie) {properties.push (właściwość);} zwraca właściwości;}, cloneObject: function (obj) {if (null === obj || "obiekt"! == typ obj) {zwróć obj;} var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty ( atr)) copy [attr] = obj [attr];} return copy;}, createParamObject: function (obj, parametr, value) {return Object.defineProperty (obj, parameter, {value: value, do zapisu: true, konfigurowalny: prawda, przeliczalna: prawda});},}}) 

Dodawanie usługi

Tworzenie kontrolera

 angular.module ('table.controller', []) .controller ('TableController', function (zakres $, filtr $, Usługa Obiektowa, Trwałość) {ITEM_PER_PAGE = 5; $ scope.types = [{value: 'Users', label: 'Użytkownicy'}, {value: 'Artykuły', label: 'Artykuły'}, {value: 'Gry', label: 'Gry'}]; $ scope.data = []; $ scope.head = [ ]; // Typ danych $ scope.changeData = function () {$ scope.uri = $ scope.type.value; $ scope.data = Persistence.list ($ scope.type.value); $ scope.head = ObjectService .getPropertiesObject ($ scope.data [0]); $ scope.propertiesHead = $ scope.head; $ scope.filter = $ filter ('fieldsSelectFilter') ([ObjectService.cloneObject ($ scope.propertiesHead), ObjectService.cloneObject ( $ scope.head)]);; $ scope.selectFilter = '$'; $ scope.changeFilterTo ();}; // Filtr $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** by $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = function (predicate) {$ scope.orderBy.reverse =! $ scope.orderB y.rewers; $ scope.orderBy.predicate = predykat; }; // Paginacja $ scope.limit = {per_page: ITEM_PER_PAGE}; // Domyślna $ scope.type = $ scope.types [0]; $ scope.changeData (); });

Wyjaśnijmy kod, który właśnie dodaliśmy:

• ITEM_PER_PAGE: Będzie on odpowiedzialny za zarządzanie limitem rekordów wyświetlanych na stronie, w tym przypadku wskazaliśmy, że jest 5 na stronie, gdy jest więcej niż 5 rekordów, które pager będzie nas poruszał, wszystko działa do ciebie, aby umieścić, ile chcesz oglądać w tym samym czasie.

• $ scope.types: Zawiera tablicę z danymi każdego typu danych, którymi będziemy manipulować w tabeli, działa w połączeniu z changeData.

• $ zakres.dane: Będzie odpowiedzialny za manipulowanie informacjami przypisanymi do niego w danym momencie i renderowanymi w dynamicznej tabeli.

• $ zakres.głowa: Będzie to nagłówek tabeli.

Funkcje:

• $ scope.changeData: Będzie odpowiedzialny za zmianę danych, które mamy w tej chwili w tabeli.

• $ scope.changeFilterTo: Jego funkcjonalnością będzie umieszczenie określonego typu filtra podczas filtrowania informacji. Na przykład: Typy filtrów rekordów użytkownika to imię i nazwisko.

• $ zakres *****: Służy do organizowania danych według kolumn tabel. Ta funkcja zostanie przypisana do nagłówka kolumn.

Kod Index.html

DaneFiltrFiltruj według {{filtr [1] [indeks $]}}
 {{przedmiot}} 
 
 

 
 
 Edytuj Usuń 
 
{{przedmiot}}
 

 

Dodajemy filtr, który dopisze nowe pole do selektora typu filtra, pole to będzie nakładało filtr na dowolną kolumnę naszej tabeli, w skrócie wykorzystuje przestrzeń, w której znajduje się pole ID i ta nowa właściwość jest przypisana.

Kod Filters.js

 .filter ('fieldsSelectFilter', function() {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; zwraca dane;};}) 

Dodajemy nasz kod CSS, aby nadać style kolumnom tabel i pagerowi. Musimy podkreślić coś ciekawego w CSS, ukryjmy kolumnę id rekordów ponieważ wizualizacja tego użytkownikowi nie jest ważna. Do kolumn dodamy „ikony”, które wskażą, kiedy kolumna sortuje informacje w kolejności rosnącej lub malejącej.

Kod główny.css

 wybierz opcję {text-transform: wielkie litery; } ul.paginacja {szerokość: 25%; margines: 0 auto; } tabela {szerokość: 100%; } table tr th {transformacja tekstu: wielkie litery; } tabela tr th: n-te dziecko (1) {szerokość: 150px; } tabela tr th: n-te dziecko (2), tabela td: n-te dziecko (2) {wyświetlanie: brak; } cz. ***** {kursor: wskaźnik; } i.up: przed, i.down: przed {treść: ''; } i.up {góra: -5px; przekształć: obróć (90deg); wyświetlacz: inline-block; pozycja: względna; } i.down {przekształć: obróć (90deg); wyświetlacz: inline-block; góra: -5px; pozycja: względna; } tr> td a {margin-lewy: 5px; }

Ponownie odświeżamy naszą przeglądarkę i teraz widzimy:

POWIĘKSZAĆ

[kolor = # a9a9a9] Kliknij obraz, aby powiększyć [/ kolor]

Wyjaśnijmy trochę, co jest w interfejsie. Mamy selektor o nazwie dane. To zostanie zamówione przez zmieńDane wydobyć informacje, które zapisaliśmy w services.js. Pole filtra odpowiada za pokazywanie konkretnych informacji, które wskazujemy, gdy piszemy w tym polu, a „filtruj według” odpowiada za wyszczególnienie, według której kolumny chcemy filtrować, domyślnie filtruje według WSZYSTKICH pól, możesz kliknij także kolumny, aby uporządkować je malejąco i rosnąco. Wykonaj różne testy ze swojej strony. Pola edycji i usuwania nie działają na razie.

POWIĘKSZAĆ

[kolor = # a9a9a9] Kliknij obraz, aby powiększyć [/ kolor]

Zasady, o których należy pamiętać
Jak wszystko, należy przestrzegać ścisłych zasad, aby nasz moduł tabeli dynamicznej działał jak najlepiej. Zawsze musimy mieć pole id, choć jest to prawie oczywiste, gdy manipulujemy rekordami z naszej bazy danych, ale nie brakuje, że ta praktyka może nas czasem ominąć. Ponadto to pole jest umieszczane jako pierwsze w każdym rekordzie JSON.

Na razie jest w toku jak manipulować danymi pochodzącymi z listy. Na przykład pole płci w danych Games byłoby faktycznie obcym identyfikatorem z innej tabeli (gdy używamy pojęcia encji-relacji), sformatuj pola numeryczne i daty, utwórz także osobne nagłówki i nie zależeć od nazwy pola, które pochodzi bezpośrednio z rejestru. Wszystko to zobaczymy w części 2 samouczka, gdy będziemy potrzebować rejestrować i aktualizować dane. Uważaj na wiadomości.

Zakończyliśmy naszą pierwszą część tabeli przestawnej. Zobaczysz, jak bardzo przyda Ci się to w Twoich projektach Angulara i nie będziesz musiał tworzyć różnych tabel do manipulowania różnymi danymi, jeśli nie, że możesz scentralizować wszystko jednym modułem.

Pobierz zaplanowane demo table-angular.zip 6.63MB 1472 Pobrania