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

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.

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.

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

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0 : Kompatibel mit AngularJS 1.0.8 und Boostrap CSS 3.x.
• ng-grid 2.0.7 : Kompatibel mit AngularJS 1.0.8
• Bootstrap CSS 3.0

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 .

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:

• ng-grid
• ng-Tabelle
• Smart-Table

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.

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.

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

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

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

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.

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.

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>

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:

• Bootstrap 3 kompatibel mit aktuellen AngularJS Bootstrap Direktiven?
• https://github.com/angular-ui/bootstrap/issues/331

Bitte beachten Sie, dass Sie in Bezug auf Smart-Table prüfen müssen, ob es für Ihre eckige Version bereit ist

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.