it-swarm.com.de

Beste Möglichkeit, ein Gitter oder eine Tabelle in AngularJS mit Bootstrap 3 darzustellen?

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.

284
Rahat Khanna

Nachdem ich ngGrid, ngTable, trNgGrid und Smart Table ausprobiert habe, bin ich zu dem Schluss gekommen, dass Smart Table bei weitem die beste Implementierung in Bezug auf AngularJS und Bootstrap ist. Es ist genau so aufgebaut, wie Sie Ihren eigenen, naiven Tisch mit Standardwinkel bauen würden. Darüber hinaus haben sie einige Direktiven hinzugefügt, mit denen Sie sortieren, filtern usw. können. Ihr Ansatz macht es auch ganz einfach, sich zu erweitern. Die Tatsache, dass sie die regulären HTML-Tags für Tabellen und das Standard-ng-repeat für die Zeilen und das Standard-bootstrap für die Formatierung verwenden, macht dies zu meinem klaren Gewinner.

Ihr JS-Code hängt von angular ab, und Ihr HTML-Code kann von bootstrap abhängen, wenn Sie möchten. Der JS-Code ist insgesamt 4 KB groß und Sie können sogar ganz einfach Dinge herauspicken, wenn Sie eine noch kleinere Stellfläche erreichen möchten.

Wo die anderen Gitter Sie in verschiedenen Bereichen klaustrophobisch machen, fühlt sich Smart Table einfach offen und auf den Punkt.

Wenn Sie sich stark auf die Inline-Bearbeitung und andere erweiterte Funktionen verlassen, können Sie zum Beispiel mit ngTable schneller loslegen. 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.

223
Ricky Helgesson

Ich hatte die gleiche Anforderung und löste sie mit diesen Komponenten:

Die Tabellenkomponente ng-grid kann Hunderte von Zeilen in einem scrollbaren Raster anzeigen. Wenn Sie mit Tausenden von Einträgen zu tun haben, ist es besser, den Paginator von ng-grid zu verwenden. Die Dokumentation von ng-grid ist exzellent 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 geben, wie es aussieht:

enter image description here

[UPDATE Juli 2017]

Nach einigen Jahren in der Produktion von ng-grid kann ich immer noch feststellen, dass es bei dieser Komponente keine größeren Probleme gibt. Ja, viele kleinere Bugs, aber keine Show-Stopper (zumindest in meinen Anwendungsfällen). Allerdings würde ich dringend davon abraten, diese Komponente zu verwenden, wenn Sie ein Projekt von Grund auf neu starten. Diese Komponente ist nur dann eine gute Option, wenn Sie an AngularJS 1.0.x gebunden sind. Wenn Sie die Version Angular 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.

116
Lars Behnke

Bei "Tausenden von Zeilen" ist es offensichtlich am besten, serverseitiges Paging durchzuführen. Als ich mir vor einiger Zeit die verschiedenen AngularJs-Tabellen-/Rasteroptionen ansah, 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 sie verwenden, und sie haben eine großartige Dokumentation und Beispiele zur Verfügung und werden aktiv verbessert.

87
Beyers

Ein funktionsreiches Angular Gitter 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 der Bedenken erhalten bleibt, sodass Sie sie vollständig in HTML beschreiben können, ohne Ihre Controller zu verfälschen.
  • Ist über Vorlagen und bidirektionale datengebundene Attribute vollständig anpassbar.
  • Pflegeleicht, da der Code in TypeScript geschrieben ist.
  • Verfügt über 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 es satt mit all den Angular Gittern da draußen.

77
MoonStom

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 der 2.0.x-Verzweigung aufgegeben, um mit 3.0 zu arbeiten, das noch sehr weit davon entfernt ist, bereit zu sein. Das Problem selbst zu beheben ist keine leichte Aufgabe, ng-grid-Code ist nicht klein und nicht einfach, es sei denn, Sie haben viel Zeit und ein tiefes Wissen über angular und js im Allgemeinen eine schwere Aufgabe sein.

Fazit: ist voller Fehler und die letzte stabile Version wurde aufgegeben.

Der Github ist voll mit 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 vielleicht etwas unangebracht klingen, aber aus der Sicht eines Entwicklers, der nach einer Bibliothek sucht, ist das meine Meinung. Ich habe viele Stunden damit verbracht, mit ng-grid in einem großen Projekt zu arbeiten, und die Kopfschmerzen hören nie auf

39
agusluc

TrNgGrid funktioniert bisher hervorragend. Hier sind die Gründe, warum ich es ng-grid vorziehe und zu dieser Komponente übergehe

  • Es erstellt Tabellenelemente, so dass es bootswatched 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

15

Am Ende dieser Antwort auf die Frage, wie man in Angular denkt, wenn Sie einen jQuery-Hintergrund haben, fasst der obere Beitrag von Josh David Miller zusammen:

Verwenden Sie nicht einmal jQuery. Fügen 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 lösen können, bevor Sie nach dem $ greifen, überlegen Sie, wie Sie dies innerhalb der AngularJS-Grenzen tun. Wenn Sie es nicht wissen, fragen Sie! 19 von 20 Fällen, für die beste Methode ist jQuery nicht erforderlich, und der Versuch, es mit jQuery zu lösen, führt zu mehr Arbeit für Sie.

Wenn Sie nun ein Raster mit einer Vielzahl von Funktionen und Anpassungsoptionen wünschen, ist jQuery DataTables eines der besten. Die Angular-only-Gitter, die ich gesehen habe, kommen den Möglichkeiten von jQuery DataTables nicht nahe.

Allerdings lässt sich jQuery DataTables nicht gut in AngularJS integrieren. (Es wurden verschiedene Anstrengungen unternommen, aber keine bietet eine nahtlose Integration.)

Vielleicht hat eine Person zwei Möglichkeiten.

Das erste ist, mit einem reinen Angular Gitter zu arbeiten, das nicht so funktionsreich ist wie DataTables. Ich bin mit @Moonstom einverstanden, dass ich die anderen Angular Gitter satt habe, und trNgGrid sieht gut aus.

Die zweite Option ist zu sagen: Dies ist einer der seltenen 1 von 20 Fällen, in denen Sie sollten Verwenden Sie jQuery und wählen Sie das Plug-in jQuery DataTables, da die Bemühungen, das Rad mit den reinen Gittern Angular neu zu erfinden, zu einem weniger robusten Rad als DataTables geführt haben.

Es wäre schön, wenn es anders wäre, aber ich habe das Ökosystem Angular einfach nicht mit einem so starken Raster wie jQuery DataTables aufwarten sehen, und es ist nicht so, als wäre ein gutes Datenraster eine gute Sache -in einer Web-App haben: Ein gutes Raster ist ein wesentliches.

10
mg1075

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/

Update:

oder Sie können immer das beliebte ng-grid ausprobieren, ng-grid ist gut zum Sortieren, Suchen, Gruppieren usw., aber ich habe es noch nicht in großem Maßstab getestet.

9
Alex Choroshin

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>
8
kashyaphp

Wie in anderen Antworten erwähnt: Wählen Sie für eine Tabelle mit Suche und Paginierung " ng-grid " aus. Einige Dinge, auf die ich gestoßen bin, werde ich erwähnen, die bei der Implementierung nützlich sein könnten:

So legen Sie env fest:

  1. http://www.json-generator.com/ zum Generieren von JSON-Daten. Es ist ein ziemlich cooles Tool, mit dem Sie Ihre Beispieldaten festlegen können, um die Entwicklung zu beschleunigen.

  2. Sie können diesen Plunker auf Ihre Implementierung überprüfen. Ich habe folgende Änderungen vorgenommen: Suchen, Auswählen und Paginieren http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

In diesem Tutorial zu Smart Table finden Sie alle erforderlichen Informationen: http://lorenzofox3.github.io/smart-table-website/

Dann ist die nächste Frage bootstrap 3: Es ist nicht genau, aber diese Vorlage sieht gut aus. - Sie können einfach https://github.com/angular-ui/bootstrap/tree/master/template verwenden. Alle Vorlagen sind gut geschrieben.

Ich kann weiter machen, wie bootstrap 3 in anglejs konvertiert wird, 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 angular Version bereit ist

4
neoahead

Das Kendo-Gitter ist genauso gut wie Wijmo. Ich weiß, dass Kendo mit Angular Bindungen für die Datenquelle geliefert wird, und ich denke, Wijmo hat ein Angular Plugin. Weder sind aber kostenlos.

3