Beste Möglichkeit, ein Raster oder eine Tabelle in AngularJS mit Bootstrap 3 darzustellen? [geschlossen]

284

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.

Rahat Khanna
quelle
6
Sie sollten sich auf jeden
Fall
1
Warum nicht UI Bootstrap verwenden? Es wurde kürzlich aktualisiert, um Bootstrap 3 zu verwenden: angular-ui.github.io/bootstrap
CallumVass
3
Diese Tausenden von Zeilen sollten nicht alle an den Client gesendet werden. Daher wird eine reine JavaScript-Lösung nicht so gut funktionieren. Der Server muss die Paginierung durchführen und / oder nach Ihnen suchen.
Flup
Das nächste Mal versuchen, ngTasty Tabelle zizzamia.com/ng-tasty/directive/table zu versuchen, es basiert auf Bootstrap CSS-Tabelle :)
Zizzamia
3
Angular bewegt sich in ein " UI-Gitter ", in das die Tabellenfunktionen eingebaut wären. eine gute Alternative zu "jquery datatables"
Tagebuch

Antworten:

223

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.

Ricky Helgesson
quelle
12
Ich habe gerade einen kleinen Fehler in Smart Table gefunden, ihn gemeldet und innerhalb von Stunden behoben. Ich bin erstaunt, dass nicht jeder Smart Table verwendet - es ist einfach so viel besser als alle anderen.
Ricky Helgesson
1
Smart Table ist definitiv die beste Wahl für AngularJS. In ngGrid gibt es weitere Funktionen, aber es ist einfach, diese Funktionen durch Erweitern von Smart Table hinzuzufügen.
Toilette
1
ng-grid 3.0.7 ist jetzt veröffentlicht und es hat gut für mich funktioniert (jetzt ui-grid genannt)
Kimball Robinson
1
Das Problem ist: Die Paginierung auf einem intelligenten Tisch ist wirklich hässlich, keine erste Seite, keine letzte Seite, die Paginierung eines ng-Tisches ist wirklich ergonomischer. Das Gleiche gilt für das Sortieren. Auf Smart-Table wissen wir einfach nicht, dass wir sortieren können, bevor wir darauf
klicken.
1
Smart Table für triviale schreibgeschützte Szenarien, UI-Grid für alles andere oder nur
UI
116

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:

Geben Sie hier die Bildbeschreibung ein

[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 .

Lars Behnke
quelle
2
Wijmo bietet auch Angular-Anweisungen sowie Funktionen wie Gruppieren, Sortieren usw. Sie können auch das Benchmark-Beispiel für ngGrid und Wijmo Grid mit AngularJS überprüfen
Ashish
@Lars Behnke Wie wende ich den Bootstrap-Tabellenstil auf ng-grid an? Soweit ich das gesehen habe, verwendet ng-grid keine table tr-Tags, auf die Bootstrap-CSS zählen.
Elpddev
Die Implementierung der ng-grid-Komponente basiert nicht auf Bootstrap. Deshalb habe ich ng-grid.less angepasst, um ein Erscheinungsbild zu erhalten, das den Bootstrap-GUI-Elementen so nahe wie möglich kommt.
Lars Behnke
1
Das Projekt ng-grid wurde als UI-Grid umgeschrieben, das unter ui-grid.info
am
2
Die Statistik von 2016 zeigt, dass das ng-tables-Plugin immer noch gefragt ist: GitHub: A. ng-grid: ~ 3500 Commits, ~ 800 Probleme. B. Smart-Table: ~ 300 Commits, ~ 40 Probleme. C. ng-Tabelle: ~ 500 Commits, ~ 200 Ausgaben. Google-Trends beweisen nur die gleiche Idee, indem sie vergleichen: "Angular Smart Table", "Angular UI Grid", "Angular NG Table". google.com/trends/…
Anton Lyhin
87

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.

Beyers
quelle
7
Ich war froh zu sehen, dass jemand ng-table erwähnte. Ich bevorzuge auch ng-table gegenüber ng-grid, da es ein besseres Styling hat, insbesondere im Bearbeitungsmodus.
Rob J
2
Hier auf den ngTable-Zug springen. Ich habe mich für ein Projekt mit ng-grid entschieden und es war ziemlich schrecklich. Ich habe mich nur wegen der Assoziation mit Angular-UI für ng-grid entschieden und es scheint auf Github etwas aktiver zu sein. Ich denke, ich werde zu ngTable wechseln. Hoffentlich wird es nicht zu schwierig.
Brett
10
Hey, Neuling mit eckigem Ökosystem, ich habe aufgrund der "besseren" Website zunächst versucht, mit ng-grid zu arbeiten, bin aber aufgrund ihrer tief verschachtelten div-Struktur schnell auf Stylingprobleme gestoßen. Bisher mag ich ng-table besser, weil es tatsächlich a verwendet table. Ich kann nur Bootstrap-Tabellenklasse anwenden und es funktioniert ...
Pierre Henry
1
Beachten Sie, dass sich der Code und die Vorgehensweise von Smart-Table mit der Version v1.0.0 (August 2014) radikal geändert haben, sodass die vor diesem Datum abgegebenen Kommentare nicht mehr relevant sind
Laurent
4
ng-table ist größtenteils inaktiv geworden, da es von einer einzelnen Person in der Ukraine gepflegt wird und es dort viele andere Probleme gab. ng-grid wird für Version 3.0 als ui-grid neu geschrieben, ist jedoch noch nicht produktionsbereit. Daher ist jetzt im Allgemeinen kein guter Zeitpunkt, um Angular-Tabellenimplementierungen auszuwählen oder zu wechseln. Smart-Table wird auch von mehr oder weniger einer einzelnen Person gepflegt. Wir verwenden derzeit ng-table, planen jedoch, im Laufe der Zeit auf ui-grid umzusteigen.
Splaktar
77

Ein funktionsreiches Winkelgitter ist dieses:

trNgGrid

Einige seiner Funktionen:

  • Wurde mit dem Gedanken an Einfachheit gebaut.
  • Verwendet einfache HTML-Tabellen, sodass die Browser das Rendering optimieren können.
  • Vollständig deklarativ, wobei die Trennung von Bedenken erhalten bleibt, sodass Sie sie vollständig in HTML beschreiben können, ohne Ihre Controller durcheinander zu bringen.
  • Ist vollständig anpassbar über Vorlagen und bidirektionale datengebundene Attribute.
  • Einfach zu warten, da der Code in TypeScript geschrieben ist.
  • Hat eine sehr kurze Liste von Abhängigkeiten: AngularJs und Bootstrap CSS, mit optionalen Bootswatch-Designs.

trNgGrid

Genießen. Ja, ich bin der Autor. Ich hatte genug von all den Angular-Gittern da draußen.

MoonStom
quelle
5
Dieser braucht etwas mehr Anerkennung. Ich habe angefangen mit 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 zu ngTablewelcher 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 diesen trNgGridund 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!
Ronnie
2
Ich stimme @Ronnie voll und ganz zu. Dies sollte der mehr Aufmerksamkeit geschenkt werden. Nachdem ich einen ganzen Tag lang mit ng-grid / ui-grid gekämpft hatte, um etwas komplexeres zu machen, versuchte ich es mit trNgGrid und arbeitete am ersten Versuch.
Johnny Everson
4
es sieht gut aus, kann aber wichtige Elemente wie feste Überschriften, anpassbare Spalten, ziehbare Spalten usw. nicht finden
iLemming
Ist Bootstrap eine harte Abhängigkeit? Ich möchte, dass mein Raster benutzerdefiniertes CSS verwendet. möglich?
Jasdeep Singh
Dies erfordert mehr Anerkennung. Ich war so nah dran, mit ng-grid zu arbeiten, bis mir klar wurde, dass es nicht einmal HTML-Tabellen verwendet.
Ryanwinchester
39

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

agusluc
quelle
Können Sie uns einige Beispiele für diese Fehler / Szenarien nennen, die Ihnen Kopfschmerzen bereiteten? Ich bin interessiert, weil ich bei der Auswahl einer der bekannten Optionen (ng-grid, trNgGrid, ng-table, SmartTable) gerade mit ng-grid beginne und nachdem ich Ihren Beitrag gelesen und die 10 Upvotes gesehen habe, habe ich gerade Angst bekommen!
Sport
1
Nun, einige von ihnen wurden repariert, glaube ich, sie verschmolzen wie 20 Pull-Anfragen, die dort monatelang saßen. Die Probleme, die ich hatte? Viele von ihnen waren darauf zurückzuführen, dass sie Divs anstelle von Tabellen für das Raster-Make-up verwenden. Auch die Ereignisse, die das Raster verfügbar macht, sind fehlerhaft, was mir viele Probleme bereitet, da ich ein Verhalten mit unendlichem Bildlauf implementiert habe. Das Bildlaufereignis wurde in einigen Situationen, die dies nicht sollten, zufällig ausgelöst. Die automatische Breite von Spalten funktioniert überhaupt nicht.
Agusluc
Am Ende hängt es davon ab, wie Sie das Raster verwenden möchten und welchen Anpassungsgrad Ihr Projekt benötigt. Überprüfen Sie den Github, lesen Sie die offenen Ausgaben, erstellen Sie eine Demo, die alle Ihre Anwendungsfälle abdeckt, und sehen Sie, wie es funktioniert. Denken Sie jedoch daran, dass 2.x branch dev aufgegeben wurde, sodass Sie in Zukunft keine Unterstützung mehr haben.
Agusluc
15

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

Matthew McKinley
quelle
10

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:

Verwenden Sie nicht einmal jQuery. Schließen Sie es nicht einmal ein. Es wird dich zurückhalten. Und wenn Sie zu einem Problem kommen, von dem Sie glauben, dass Sie es bereits in jQuery zu lösen wissen, bevor Sie nach dem greifen $, versuchen Sie, darüber nachzudenken, wie es innerhalb der Grenzen des AngularJS zu tun ist. Wenn Sie es nicht wissen, fragen Sie! 19 Mal von 20, der beste Weg, dies zu tun, erfordert nicht jQuery, und der Versuch, es mit jQuery zu lösen, führt zu mehr Arbeit für Sie.

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.

mg1075
quelle
+1 So wahr. Schade, dass DataTables noch nicht integriert wurde; vielleicht einfach zu eng mit dem DOM verbunden.
CSSian
2
Versuchen Sie dies l-lin.github.io/angular-datatables
Craig
9

Sie können Bootstrap 3-Klassen verwenden und eine Tabelle mit der Anweisung ng-repeat erstellen

Beispiel:

angular.module('App', []);

function ctrl($scope) {
    $scope.items = [
        ['A', 'B', 'C'],
        ['item1', 'item2', 'item3'],
        ['item4', 'item5', 'item6']
    ];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

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.

Alex Choroshin
quelle
7
Ja, das ist die Standardmethode zum Erstellen einer Tabelle ohne Sortieren, Paginieren, Filtern, Ajax-Raloading usw. in Angular. Bei Tausenden von Zeilen wird jede Anwendung jedoch zum Stillstand gebracht.
Mainguy
Dies führt zu einer sehr verzögerten Benutzeroberfläche.
Boi_echos
8

Adapt-Strap . Hier ist die Geige .

Es ist extrem leicht und hat dynamische Reihenhöhen.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>
kashyaphp
quelle
Ist es möglich, die Breite der Spalten zu ändern?
Tomasz Waszczyk
4

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:

  1. 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.

  2. 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

neoahead
quelle
3

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.

Trevor de Koekkoek
quelle
3
Ich habe eine schreckliche Erfahrung mit KendoUI gemacht. Es ist so aufgebläht, dass es wie ein Hund läuft und für die komplexeren Komponenten so zusammengehackt zu sein scheint, dass es schwierig, wenn nicht unmöglich ist, Funktionen zum Laufen zu bringen, die sozusagen nicht "out of the box" verfügbar sind. Es ist auch stark auf die Arbeit mit ihren Serverkomponenten ausgerichtet und für Randfälle sehr schlecht dokumentiert. Ich würde mich von ihnen fernhalten!
Precastic