Wie wir gut wissen, AngularJS bietet uns eine Vielzahl interessanter Utilities bei der Arbeit an der Web- und Mobile-Entwicklung, es gibt so viele Vorteile, dass es uns hilft, eine große Dynamik in unseren Webprojekten zu generieren.
Heute lernen Sie, mit diesem Framework eine dynamische Tabelle zu erstellen, mit der Sie jede Art von Datensätzen bearbeiten können, die Sie in Ihrer Entwicklung haben wird nur einmal codiert. Damit können Sie die Informationen, die Sie im System gespeichert haben, auflisten, filtern, paginieren, sortieren, erstellen, bearbeiten und löschen. In diesem ersten Teil beschäftigen wir uns mit allem, was mit Abfragen zu tun hat (Liste, Filter, Paginierung, Sortierung), im zweiten Teil beschäftigen wir uns mit der Erstellung, Bearbeitung und Löschung von Datensätzen.
Zu seiner Zeit haben wir bereits ein Tutorial zum Erstellen von Inamic-Routen mit AngularJS Ngroute erstellt. Heute gehen wir ganz anders darauf ein. Es sollte auch klargestellt werden, dass es ratsam ist, AngularJS-KenntnisseDa einige Details dieses Frameworks nicht vollständig erklärt werden, wird auch empfohlen (nicht obligatorisch), GIT, NPM auf unserem System zu installieren, da wir in diesem Tutorial damit arbeiten werden.
Projekt erstellen
Organisieren wir zunächst unser Projekt mit npm, git und bower. Erstellen Sie das Projektverzeichnis namens table-angular, verwenden Sie dann innerhalb des Projekts den Befehl "git init", um das Repository zu erstellen, und verwenden Sie dann den Befehl "npm init", um die Datei package.json zu erstellen.
Wir installieren unseren Webserver mit dem Befehl `npm install --save-dev express`. Nach der Installation erstellen wir eine Datei namens server.js
var express = erfordern ('express'); var app = express(); var port = Nummer (process.env.PORT || 3000); app.use (express.static (__ dirname + '/public')); app.listen (port, function () {console.log ('App gestartet unter http: // localhost:' + port);}); Jetzt führen wir den Befehl aus (um Bower zu installieren):
npm install --save-dev BowerInnerhalb des Root-Verzeichnisses erstellen wir ein weiteres namens public, in public erstellen wir eine index.html-Datei. Dann erstellen wir ein öffentliches Verzeichnis namens Assets, in diesem Verzeichnis erstellen wir ein weiteres Verzeichnis namens js, und darin erstellen wir die app.js-Dateien. controller.js, services.js Ja filter.js. Dann erstellen wir ein Verzeichnis namens css und darin eine Datei namens main.css
Bisher läuft unser Projekt wie folgt:
Wir verwenden weiterhin unsere Bibliotheken. Wir werden für diesen Fall Bower verwenden, wir werden die Angular- und Foundation-Bibliotheken verwenden, um unserer Ansicht ein wenig Stil zu verleihen. Wir werden auch eine Bibliothek namens angle-utils-pagination anhängen, die uns Funktionalität mit Paginierung in unserem Projekt gibt. Vor der Installation dieser Bibliotheken erstellen wir in unserem Stammverzeichnis eine Datei namens .bowerrc, die Bower mitteilt, wo diese Bibliotheken gespeichert werden sollen.
Weitere Informationen zu den einzelnen Bibliotheken, die wir verwenden werden:
.Bowerrc-Code
{"directory": "public/assets/bower_components"}Um die Bibliotheken zu installieren, verwenden wir die Befehle:
- `Bower install --save angle`
- `Bower install --save Fundament`
- `Bower install --save angle-utils-pagination`
Es sollte klargestellt werden, dass Foundation mit jquery arbeitet und sie heruntergeladen werden, wenn wir Bower verwenden, aber für unser Projekt werden wir sie nicht verwenden, was wir weglassen können. In meinem Fall werde ich sie aus dem Bower_components-Verzeichnis entfernen.
Das haben wir bisher erstellt:
Wir übergeben nun die Codierung der Pivot-Tabelle 😁, wir beginnen mit index.html, wir fügen alle benötigten Bibliotheken an.
Drehtisch mit Angular JSIn controller.js erstellen wir einen Controller namens TableController, der von index.html aufgerufen wird
Controller.js-Code
angle.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); Für filter.js erstellen wir vorerst nur die Modulinstanz:
Winkelmodul ('table.filters', []);Dasselbe machen wir mit services.js, wir erstellen nur die Instanz:
angle.module ('table.services', []);Schließlich rufen wir alle Module aus app.js auf.
angle.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);Und damit können wir die erste Ausführung unserer Anwendung mit dem Befehl durchführen:
`Knotenserver.js`Wenn wir das Browser-Entwicklertool auf der Konsolenregisterkarte verwenden, können wir überprüfen, ob das Wort Table Controller gedruckt wurde, um anzuzeigen, dass alles, was wir bisher erstellt haben, ordnungsgemäß funktioniert.
Dienste hinzufügen
Wir beginnen damit, unsere Dienste zu erstellen, die wir nutzen werden. Für das Tutorial werden wir keine Verbindung zu einem Remote-Server herstellen, daher werden wir die Datensätze in unseren Javascript-Dateien speichern. Wir werden drei Arten von Registern verwenden. Spiele, Artikel und Benutzer, die nicht dieselben Felder verwenden, simulieren jeweils einen unabhängigen Dienst, als ob er von einem REST-API, alles im JSON-Format. Wenn Sie möchten, können Sie diesen drei Typen weitere Felder hinzufügen oder ein neues hinzufügen.
Services.js-Code
.factory ('Benutzer', Funktion () {return {get: function () {var data = [{id: 1, Vorname:' Juan ', Nachname:' Perez '}, {id: 5, Vorname :' Ana María ', Nachname:' Garcia '}, {id: 15, Vorname:' Alejandro ', Nachname:' Magno '}, {id: 18, Vorname:' Andrea ', Nachname:' L '}, {id: 19 , Vorname: 'Pablo', Nachname: 'Gutierrez'}, {id: 8, Vorname: 'Ana', Nachname: 'H'},]; Daten zurückgeben;} }}) .factory ('Artikel', function ( ) {return {get: function () {var data = [{id: 20, title: 'My first article', Summary: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'}, {id: 21, title: 'Mein zweiter Artikel', Summary: 'Lorem ipsum pain sit amet, consectetur adipisicing elit.'}, {Id: 22, title: 'Mein dritter Artikel', Summary: ' Lorem ipsum pain sit amet, consectetur adipisicing elit.'} ]; Daten zurückgeben;}}}) .factory ('Games', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', Genre: 'Action'}, {id: 2, Titel: 'Zelda', Genre: 'Adventure'}, {id: 3, Titel: 'Golden Eye', Genre: 'S hooter '}, {id: 4, title:' Fifa 2016', genre:' Sports'},]; Daten zurückgeben; }}}) Wir werden auch einen weiteren Dienst namens Call anhängen, der für den Abruf der verschiedenen Daten (Benutzer, Spiele und Artikel) verantwortlich ist.
.factory ('Call', function ($ Injektor) {return {get: function (type) {var service = $ Injector.get (type); return service.get (;}};}) Und zum Schluss erstellen wir ein Dienst namens Persistenz wer wird dafür verantwortlich sein CRUD unserer Informationen. Wie ich eingangs schon sagte, werden wir in diesem ersten Teil des Tutorials nur Abfragefunktionen ausführen, also nur die Listenfunktion verwenden, im zweiten Teil werden wir den Rest verwenden.
.factory ('Persistenz', Funktion (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (type);}, update: function (type, index, data) {var Obj = Call.get (type); return Obj [index] = data;}, get: function (type, index) {var Obj = Call.get (Typ); Rückgabe Obj [Index];}, Destroy: Funktion (Typ, Index) {var Obj = Call.get (Typ); Rückgabe Obj.splice (Index, 1);}};} ) Wir müssen einen Dienst hinzufügen, der alle Objekte in der Pivot-Tabelle behandelt.
.factory ('ObjectService', function () {return {getPropertiesObject: function (object) {var properties = []; for (var property in object) {properties.push (property);} return properties;}, cloneObject: function (obj) {if (null === obj || "object"! == typeof obj) {return obj;} var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty ( attr)) copy [attr] = obj [attr];} return copy;}, createParamObject: function (obj, parameter, value) {return Object.defineProperty (obj, parameter, {value: value, schreibbar: true, konfigurierbar: wahr, aufzählbar: wahr});},}}) Dienst hinzufügen
Controller erstellen
angle.module ('table.controller', []) .controller ('TableController', function ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{value: 'Users', label: 'Users'}, {value: 'Articles', label: 'Articles'}, {value: 'Games', label: 'Games'}]; $ scope.data = []; $ scope.head = [ ]; // Datentyp $ 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 ();}; // Filter $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** by $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = Funktion (Prädikat) {$ scope.orderBy.reverse =! $ scope.orderB y.rückwärts; $ scope.orderBy.predicate = Prädikat; }; // Paginierung $ scope.limit = {pro_page: ITEM_PER_PAGE}; // Standard $ scope.type = $ scope.types [0]; $ scope.changeData (); });Lassen Sie uns den Code, den wir gerade hinzugefügt haben, ein wenig erklären:- ITEM_PER_PAGE: Es ist für die Verwaltung des Limits der pro Seite anzuzeigenden Datensätze verantwortlich. In diesem Fall haben wir angegeben, dass es 5 pro Seite gibt. Wenn es mehr als 5 Datensätze gibt, wird ein Pager angezeigt, um uns zu bewegen, es ist oben an Sie, um zu platzieren, wie viele Sie gleichzeitig anzeigen möchten.
- $ scope.types: Es enthält ein Array mit den Daten jedes Datentyps, den wir in der Tabelle bearbeiten werden, und funktioniert in Verbindung mit changeData.
- $ scope.data: Es ist dafür verantwortlich, die ihm zu diesem Zeitpunkt zugewiesenen Informationen zu manipulieren und in der dynamischen Tabelle darzustellen.
- $ scope.head: Es wird die Kopfzeile der Tabelle sein.
Funktionen:
- $ scope.changeData: Es wird dafür verantwortlich sein, die Daten zu ändern, die wir derzeit in der Tabelle haben.
- $ scope.changeFilterTo: Seine Funktionalität besteht darin, beim Filtern der Informationen einen bestimmten Filtertyp zu setzen. Beispiel: Filtertypen für Benutzerdatensätze wären Vor- und Nachname.
- $ Umfang. *****: Wird verwendet, um die Daten nach den Spalten der Tabellen zu organisieren. Diese Funktion wird dem Spaltenkopf zugewiesen.
Index.html-Code
DatenFilterFiltern nach {{filter [1] [$ index]}}
| Bearbeiten Löschen | {{Artikel}} |
Filters.js-Code
.filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; return data;};}) Wir fügen unseren CSS-Code hinzu, um den Spalten der Tabellen und dem Pager einige Stile zu geben. Wir müssen etwas Interessantes im CSS hervorheben, lass uns die ID-Spalte der Datensätze ausblenden da dies nicht wichtig ist, um es dem Benutzer zu visualisieren. Wir fügen den Spalten "Symbole" hinzu, die anzeigen, wann die Spalte die Informationen in aufsteigender oder absteigender Reihenfolge sortiert.
Main.css-Code
select option {text-transform: capitalize; } ul.pagination {Breite: 25%; Rand: 0 automatisch; } Tabelle {Breite: 100%; } Tabelle tr th {Text-Transformation: Großschreibung; } Tabelle tr th: n-tes-Kind (1) {Breite: 150px; } Tabelle tr th: n-tes-Kind (2), Tabelle td: n-tes-Kind (2) {Anzeige: keine; } th. ***** {Cursor: Zeiger; } i.up: vorher, i.down: vor {content: ''; } i.up {oben: -5px; transformieren: drehen (90deg); Anzeige: Inline-Block; Position: relativ; } i.down {transformieren: drehen (90deg); Anzeige: Inline-Block; oben: -5px; Position: relativ; } tr> td a {Rand-links: 5px; }Wir aktualisieren unseren Browser erneut und sehen nun Folgendes:
VERGRÖSSERN
[color = # a9a9a9] Zum Vergrößern auf das Bild klicken [/color]
Lassen Sie uns ein wenig erklären, was in der Benutzeroberfläche steht. Wir haben einen Selektor namens data. Dies wird bestellt von Daten ändern Extrahieren Sie die Informationen, die wir in gespeichert haben services.js. Das Filterfeld ist dafür verantwortlich, die spezifischen Informationen anzuzeigen, die wir angeben, wenn wir in dieses Feld schreiben, und "filtern nach" ist dafür verantwortlich, anzugeben, nach welcher Spalte wir filtern möchten. Standardmäßig filtert es nach ALLEN Feldern, Sie können Klicken Sie auch auf die Spalten, um sie absteigend und aufsteigend zu sortieren. Führen Sie die verschiedenen Tests Ihrerseits durch. Die Felder zum Bearbeiten und Löschen sind vorerst nicht funktionsfähig.
VERGRÖSSERN
[color = # a9a9a9] Zum Vergrößern auf das Bild klicken [/color]
Regeln, die Sie beachten sollten
Wie bei allem müssen strenge Regeln befolgt werden, damit unser dynamisches Tabellenmodul optimal funktionieren kann. Wir müssen immer ein ID-Feld haben, obwohl dies fast offensichtlich ist, wenn wir Datensätze aus unserer Datenbank manipulieren, aber es fehlt nicht, dass diese Praxis manchmal an uns vorbeigeht. Außerdem wird dieses Feld in jedem JSON-Datensatz an erster Stelle platziert.
Vorerst steht es noch aus wie man die Daten manipuliert, die aus einer Liste kommen. Zum Beispiel wäre das Geschlechtsfeld in den Spieledaten tatsächlich eine fremde ID aus einer anderen Tabelle (wenn wir das Entitätsbeziehungskonzept verwenden), formatieren Sie die numerischen Felder und Daten, erstellen Sie auch separate Überschriften und hängen Sie nicht vom Namen des Felds ab, das kommt direkt aus der Registry. All dies werden wir in Teil 2 des Tutorials sehen, wenn wir Daten aufzeichnen und aktualisieren müssen. Achten Sie auf die Nachrichten.
Wir haben unseren ersten Teil der Pivot-Tabelle fertiggestellt. Sie werden sehen, wie sehr es Ihnen in Ihren Angular-Projekten hilft und nicht verschiedene Tabellen erstellen müssen, um verschiedene Daten zu manipulieren, wenn nicht, dass Sie alles mit einem einzigen Modul zentralisieren können.
Geplante Demo herunterladen
table-angular.zip 6.63MB 1472 Downloads
