Ich erstelle eine App mit AngularJS und Bootstrap 3. Ich möchte eine Tabelle / ein Raster mit Tausenden von Zeilen anzeigen. Was ist das beste verfügbare Steuerelement für AngularJS & Bootstrap mit Funktionen wie Sortieren, Suchen, Paginieren usw.
angularjs
twitter-bootstrap-3
ng-grid
angular-ui-grid
smart-table
Rahat Khanna
quelle
quelle
Antworten:
Nachdem ich ngGrid, ngTable, trNgGrid und Smart Table ausprobiert habe, bin ich zu dem Schluss gekommen, dass Smart Table bei AngularJS und Bootstrap bei weitem die beste Implementierung ist. Es ist genauso aufgebaut, wie Sie Ihren eigenen, naiven Tisch mit Standardwinkeln bauen würden. Darüber hinaus haben sie einige Anweisungen hinzugefügt, die Ihnen beim Sortieren, Filtern usw. helfen. Ihr Ansatz macht es auch recht einfach, sich selbst zu erweitern. Die Tatsache, dass sie die regulären HTML-Tags für Tabellen und die Standard-ng-Wiederholung für die Zeilen und den Standard-Bootstrap für die Formatierung verwenden, macht dies zu meinem klaren Gewinner.
Ihr JS-Code hängt vom Winkel ab und Ihr HTML-Code kann vom Bootstrap abhängen, wenn Sie möchten. Der JS-Code ist insgesamt 4 KB groß und Sie können sogar problemlos Inhalte auswählen, wenn Sie eine noch geringere Stellfläche erreichen möchten.
Wo die anderen Gitter in verschiedenen Bereichen zu Klaustrophobie führen, fühlt sich Smart Table einfach offen und auf den Punkt.
Wenn Sie sich stark auf Inline-Bearbeitung und andere erweiterte Funktionen verlassen, können Sie beispielsweise mit ngTable schneller einsatzbereit sein. Es steht Ihnen jedoch frei, solche Funktionen ganz einfach in Smart Table hinzuzufügen.
Verpassen Sie nicht Smart Table !!!
Ich habe keine Beziehung zu Smart Table, außer wenn ich es selbst benutze.
quelle
Ich hatte die gleiche Anforderung und löste sie mit den folgenden Komponenten:
Die Tabellenkomponente ng-grid kann Hunderte von Zeilen in einem scrollbaren Raster anzeigen. Wenn Sie mit Tausenden von Einträgen arbeiten müssen, ist es besser, den Paginator von ng-grid zu verwenden. Die Dokumentation von ng-grid ist hervorragend und enthält viele Beispiele. Sortieren und Suchen werden auch in Kombination mit Paginierung unterstützt.
Hier ist ein Screenshot eines aktuellen Projekts, um Ihnen einen Eindruck davon zu vermitteln, wie es aussieht:
[UPDATE Juli 2017]
Nachdem ich ng-grid einige Jahre in Produktion hatte, kann ich immer noch feststellen, dass es bei dieser Komponente keine größeren Probleme gibt. Ja, viele kleinere Fehler, aber keine Show-Stopper (zumindest in meinen Anwendungsfällen). Trotzdem würde ich dringend davon abraten, diese Komponente zu verwenden, wenn Sie ein Projekt von vorne beginnen. Diese Komponente ist nur dann eine gute Option, wenn Sie an AngularJS 1.0.x gebunden sind . Wenn Sie die Angular-Version frei wählen können, wählen Sie eine neuere Komponente. Eine Liste der Tabellenkomponenten für Angular 4 wurde von Sam Deering in diesem Blog zusammengestellt .
quelle
Bei "Tausenden von Zeilen" ist es natürlich am besten, serverseitiges Paging durchzuführen. Als ich vor einiger Zeit die verschiedenen AngularJs-Tabellen- / Rasteroptionen betrachtete, gab es drei klare Favoriten:
Alle drei sind gut, aber unterschiedlich implementiert. Welches Sie auswählen, hängt wahrscheinlich mehr von Ihren persönlichen Vorlieben als von irgendetwas anderem ab.
ng-grid ist wahrscheinlich das bekannteste aufgrund seiner Assoziation mit angle-ui, aber ich persönlich bevorzuge ng-table , ich mag ihre Implementierung und wie Sie es verwenden, und sie haben großartige Dokumentationen und Beispiele zur Verfügung und werden aktiv verbessert.
quelle
table
. Ich kann nur Bootstrap-Tabellenklasse anwenden und es funktioniert ...Ein funktionsreiches Winkelgitter ist dieses:
trNgGrid
Einige seiner Funktionen:
Genießen. Ja, ich bin der Autor. Ich hatte genug von all den Angular-Gittern da draußen.
quelle
ngGrid
. Ich konnte nicht herausfinden, welche Version ich verwenden sollte, da ich vermutlich zwischen dem Übergang von 2.x zu 3.x gesucht habe, und ich konnte den Tisch nicht einmal zum Laufen bringen. Dann bin ich zungTable
welcher Art von Arbeit übergegangen. Ich konnte das Sortieren oder Paging nicht richtig ausführen, aber das lag an der Art und Weise, wie ich Daten geladen habe$http
. Dann sah ich diesentrNgGrid
und heiligen Mist ... so einfach in Betrieb zu nehmen. Ich wünschte, ich könnte hier mehr schreiben, aber ich schlage vor, jeder probiert es zuerst aus!Für alle, die diesen Beitrag lesen: Tun Sie sich selbst einen Gefallen und halten Sie sich von ng-grid fern. Ist voll von Fehlern (wirklich ... fast jeder Teil der Bibliothek ist irgendwie kaputt), haben die Entwickler die Unterstützung des 2.0.x-Zweigs aufgegeben, um in 3.0 zu arbeiten, das noch lange nicht fertig ist. Das Beheben der Probleme selbst ist keine leichte Aufgabe, ng-grid-Code ist nicht klein und nicht einfach. Wenn Sie nicht viel Zeit und ein tiefes Wissen über Winkel und js im Allgemeinen haben, wird es eine schwierige Aufgabe sein.
Fazit: ist voller Fehler und die letzte stabile Version wurde aufgegeben.
Der Github ist voller PRs, aber sie werden ignoriert. Und wenn Sie einen Fehler in der 2.x-Verzweigung melden, wird dieser geschlossen.
Ich weiß, dass es sich um ein Open-Source-Projekt handelt, und die Beschwerden klingen vielleicht etwas unangebracht, aber aus der Sicht eines Entwicklers, der nach einer Bibliothek sucht, ist das meine Meinung. Ich habe viele Stunden mit ng-grid in einem großen Projekt gearbeitet und die Headcaches enden nie
quelle
TrNgGrid funktioniert bisher hervorragend. Hier sind die Gründe, warum ich es ng-grid vorziehe und zu dieser Komponente verschoben habe
Es erstellt Tabellenelemente, sodass es bootgeschaut werden kann und die gesamte Leistung von Bootstrap .css nutzt (ng-grid verwendet jQuery-UI-Designs).
Einfache, gut dokumentierte Rasteroptionen.
Paging in Servergröße funktioniert
quelle
Am Ende dieser Antwort auf die Frage, wie man in Angular denkt, wenn man einen jQuery-Hintergrund hat, fasst der Top-Beitrag von Josh David Miller Folgendes zusammen:
Wenn Sie nun ein Raster mit unzähligen Funktionen und Anpassungsoptionen wünschen, ist jQuery DataTables eines der besten. Die Nur-Winkel-Raster, die ich gesehen habe, kommen der Leistung von jQuery DataTables nicht nahe.
Allerdings , ist jQuery Tables nicht gut integriert mit AngularJS. (Es wurden verschiedene Anstrengungen unternommen, aber keine bietet eine nahtlose Integration.)
Vielleicht hat eine Person zwei Möglichkeiten.
Das erste ist, ein reines Winkelraster zu verwenden, das nicht so funktionsreich ist wie DataTables. Ich stimme @Moonstom darin zu, dass ich die anderen Angular-Gitter da draußen satt habe, und trNgGrid sieht gut aus.
Die zweite Option ist zu sagen: Das ist einer jener seltenen 1 von 20 Fällen , in denen Sie sollten jQuery und gehen mit der jQuery Tables Plug-in, weil die Bemühungen einen nachgegeben hat das Rad mit den reinen Winkel Gittern neu zu erfinden verwenden weniger robustes Rad als DataTables.
Es wäre schön, wenn es anders wäre, aber ich habe einfach nicht gesehen, dass das Angular-Ökosystem ein so starkes Raster wie jQuery DataTables hat, und es ist nicht so, als wäre ein gutes Datenraster eine schöne Sache in einer Web-App : Ein gutes Gitter ist ein wesentlicher Bestandteil.
quelle
Sie können Bootstrap 3-Klassen verwenden und eine Tabelle mit der Anweisung ng-repeat erstellen
Beispiel:
Live-Beispiel: http://jsfiddle.net/choroshin/5YDJW/5/
Aktualisieren:
oder Sie können immer das beliebte ng-grid ausprobieren. ng-grid eignet sich gut zum Sortieren, Suchen, Gruppieren usw., aber ich habe es noch nicht in großem Maßstab getestet.
quelle
Adapt-Strap . Hier ist die Geige .
Es ist extrem leicht und hat dynamische Reihenhöhen.
quelle
Wie in anderen Antworten erwähnt: Für eine Tabelle mit Suche wählen und paginieren Sie " ng-grid " die besten Optionen. Einige Dinge, auf die ich gestoßen bin, werde ich erwähnen, die bei der Implementierung nützlich sein könnten:
So stellen Sie env ein:
http://www.json-generator.com/ zum Generieren von JSON-Daten. Es ist ein ziemlich cooles Tool, um Ihren Beispieldatensatz zu erhalten und die Entwicklung zu beschleunigen.
Sie können diesen Plunker auf Ihre Implementierung überprüfen. Ich habe Folgendes geändert: Suchen, Auswählen und Paginieren http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
Sie können dieses Tutorial über Smart Table lesen. Hier finden Sie alle Informationen, die Sie benötigen: http://lorenzofox3.github.io/smart-table-website/
Dann ist die nächste Frage
bootstrap 3
: Es ist nicht genau, aber diese Vorlagen sehen gut aus. - Sie können einfach https://github.com/angular-ui/bootstrap/tree/master/template verwenden. Alle Vorlagen sind gut geschrieben.Ich kann fortfahren, wie man Bootstrap 3 in anglejs konvertiert, aber es wird bereits in den folgenden Links erwähnt:
Bitte beachten Sie, dass Sie in Bezug auf Smart-Table prüfen müssen, ob es für Ihre eckige Version bereit ist
quelle
Kendo Grid ist genauso gut wie Wijmo. Ich weiß, dass Kendo Angular-Bindungen für die Datenquelle enthält, und ich denke, Wijmo hat ein Angular-Plugin. Weder sind aber frei.
quelle