La meilleure façon de représenter une grille ou une table dans AngularJS avec Bootstrap 3? [fermé]

Je crée une application avec AngularJS et Bootstrap 3. Je veux montrer une table / grille avec des milliers de lignes. Quel est le meilleur contrôle disponible pour AngularJS & Bootstrap avec des fonctionnalités comme le tri, la recherche, la pagination, etc.

Après avoir essayé ngGrid, ngTable, trNgGrid et Smart Table , je suis arrivé à la conclusion que Smart Table est de loin la meilleure implémentation AngularJS et Bootstrap. Il est construit exactement de la même manière que vous construiriez votre propre table naïve en utilisant un angulaire standard. En plus de cela, ils ont ajouté quelques directives qui vous aident à faire le tri, le filtrage, etc. Leur approche facilite également l'extension. Le fait qu'ils utilisent les balises html régulières pour les tableaux et le ng-repeat standard pour les lignes et le bootstrap standard pour le formatage en font mon gagnant incontestable.

Leur code JS dépend de l'angulaire et votre html peut dépendre du bootstrap si vous le souhaitez. Le code JS est de 4 ko au total et vous pouvez même facilement y chercher des éléments si vous souhaitez atteindre une empreinte encore plus petite.

Là où les autres grilles vous donneront la claustrophobie dans différents domaines, Smart Table se sent juste ouvert et au point.

Si vous comptez énormément sur l'édition en ligne et d'autres fonctionnalités avancées, vous pourriez être opérationnel plus rapidement avec ngTable par exemple. Cependant, vous êtes libre d'ajouter assez facilement de telles fonctionnalités dans Smart Table.

Ne manquez pas Smart Table !!!

Je n'ai aucun rapport avec Smart Table, sauf de l'utiliser moi-même.

J'ai eu la même exigence et l'ai résolu en utilisant ces composants:

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0 : Compatible avec AngularJS 1.0.8 et Boostrap CSS 3.x.
• ng-grid 2.0.7 : Compatible avec AngularJS 1.0.8
• Bootstrap CSS 3.0

Le composant de table ng-grid est capable d'afficher des centaines de lignes dans une grille déroulante. Si vous devez gérer des milliers d'entrées, il vaut mieux utiliser le paginateur de ng-grid. La documentation de ng-grid est excellente et contient de nombreux exemples. Le tri et la recherche sont pris en charge même en combinaison avec la pagination.

Voici une capture d'écran d'un projet en cours pour vous donner une impression à quoi il ressemble:

[MISE À JOUR juillet 2017]

Après avoir ng-grid en production pendant quelques années, je peux toujours dire qu'il n'y a pas de problèmes majeurs avec ce composant. Oui, beaucoup de bugs mineurs, mais pas d'arrêt (du moins dans mes cas d'utilisation). Cela dit, je déconseille fortement d'utiliser ce composant si vous démarrez un projet à partir de zéro. Ce composant est une bonne option que si vous êtes lié à AngularJS 1.0.x . Si vous êtes libre de choisir la version angulaire, optez pour un composant plus récent. Une liste des composants de table pour Angular 4 a été compilée par Sam Deering dans ce blog .

Avec des "milliers de lignes", votre meilleur pari serait évidemment de faire de la pagination côté serveur. Quand j'ai regardé les différentes options de table / grille AngularJs il y a quelque temps, il y avait trois favoris clairs:

• ng-grid
• ng-table
• Smart-Table

Les trois sont bons, mais mis en œuvre différemment. Lequel vous choisissez sera probablement plus basé sur vos préférences personnelles qu'autre chose.

ng-grid est probablement le plus connu en raison de son association avec angular-ui, mais je préfère personnellement ng-table , j'aime vraiment leur implémentation et la façon dont vous l'utilisez, et ils ont une excellente documentation et des exemples disponibles et activement améliorés.

Une grille angulaire riche en fonctionnalités est celle-ci:

trNgGrid

Certaines de ses fonctionnalités:

• A été construit avec simplicité à l'esprit.
• Utilise des tableaux HTML simples, permettant aux navigateurs d'optimiser le rendu.
• Entièrement déclaratif, préservant la séparation des préoccupations, vous permettant ainsi de le décrire entièrement en HTML, sans gâcher vos contrôleurs.
• Est entièrement personnalisable via des modèles et des attributs liés aux données bidirectionnelles.
• Facile à entretenir, ayant le code écrit en TypeScript.
• A une très courte liste de dépendances: AngularJs et Bootstrap CSS, avec des thèmes Bootswatch optionnels.

Prendre plaisir. Oui, je suis l'auteur. J'en ai marre de toutes les grilles angulaires.

Pour tous ceux qui lisent ce post: Rendez-vous service et restez à l'écart de ng-grid. Est plein de bugs (vraiment .. presque toutes les parties de la bibliothèque sont cassées d'une manière ou d'une autre), les développeurs ont abandonné le support de la branche 2.0.x pour fonctionner en 3.0 qui est très loin d'être prêt. Résoudre les problèmes par vous-même n'est pas une tâche facile, le code ng-grid n'est pas petit et n'est pas simple, sauf si vous avez beaucoup de temps et une connaissance approfondie de angular et js en général, ce sera une tâche difficile.

Bottom Line: est plein de bugs, et la dernière version stable a été abandonnée.

Le github est plein de PR, mais ils sont ignorés. Et si vous signalez un bogue dans la branche 2.x, il est fermé.

Je sais que c'est un projet open source et les plaintes peuvent sembler un peu déplacées, mais du point de vue d'un développeur à la recherche d'une bibliothèque, c'est mon avis. J'ai passé de nombreuses heures à travailler avec ng-grid dans un grand projet et les maux de tête sont sans fin

TrNgGrid fonctionne très bien jusqu'à présent. Voici les raisons pour lesquelles je le préfère à ng-grid et déplacé vers ce composant

• Il crée des éléments de table afin qu'il puisse être surveillé et utiliser toute la puissance de bootstrap .css (ng-grid utilise des thèmes jQuery UI).

• Options de grille simples et bien documentées.

• La pagination de la taille du serveur fonctionne

À la fin de cette réponse à la question de savoir comment penser dans Angular si vous avez un arrière-plan jQuery, le premier article de Josh David Miller résume:

N'utilisez même pas jQuery. Ne l'incluez même pas. Cela vous retiendra. Et lorsque vous arrivez à un problème que vous pensez savoir déjà résoudre dans jQuery, avant d'atteindre le $, essayez de réfléchir à la façon de le faire dans les limites d'AngularJS. Si vous ne savez pas, demandez! 19 fois sur 20, la meilleure façon de le faire n'a pas besoin de jQuery et d'essayer de le résoudre avec jQuery entraîne plus de travail pour vous.

Maintenant, si vous voulez une grille avec des tonnes de fonctionnalités et d'options de personnalisation, jQuery DataTables est l'un des meilleurs. Les grilles angulaires uniquement que j'ai vues ne se rapprochent pas de ce que jQuery DataTables peut faire.

Cependant , jQuery DataTables ne s'intègre pas bien avec AngularJS. (Il y a eu divers efforts, mais aucun n'offre une intégration transparente.)

Cela laisse peut-être une personne avec deux options.

La première consiste à utiliser une grille angulaire pure qui n'est pas aussi riche en fonctionnalités que DataTables. Je suis d'accord avec @Moonstom sur le fait d'en avoir marre des autres grilles angulaires, et trNgGrid a l'air bien.

La deuxième option consiste à dire: c'est l' un de ces rares 1 sur 20 cas où vous devriez utiliser jQuery et aller avec le plug-in jQuery DataTables, parce que les efforts de réinventer la roue avec les grilles pures angulaires ont donné une roue moins robuste que DataTables.

Ce serait bien s'il en était autrement, mais je n'ai tout simplement pas vu l'écosystème Angular proposer une grille aussi solide que jQuery DataTables, et ce n'est pas comme si une bonne grille de données était un atout dans une application web : une bonne grille est indispensable.

Vous pouvez utiliser des classes bootstrap 3 et créer une table à l'aide de la directive ng-repeat

Exemple:

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>

exemple en direct: http://jsfiddle.net/choroshin/5YDJW/5/

Mettre à jour:

ou vous pouvez toujours essayer la populaire ng-grid , ng-grid est bon pour le tri, la recherche, le regroupement, etc., mais je ne l'ai pas encore testé à grande échelle.

Adapt-Strap . Voici le violon .

Il est extrêmement léger et a des hauteurs de rangées dynamiques.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

Comme mentionné dans d'autres réponses: Pour un tableau avec recherche, la sélection et la pagination " ng-grid " sont les meilleures options. Quelques choses que j'ai rencontrées, je les mentionnerai qui pourraient être utiles lors de la mise en œuvre:

Pour définir env:

1. http://www.json-generator.com/ pour générer des données JSON. C'est un outil assez cool pour obtenir votre échantillon de données pour accélérer le développement.

2. Vous pouvez vérifier ce plunker pour votre implémentation. J'ai modifié pour inclure: recherche, sélection et pagination http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Vous pouvez consulter ce tutoriel sur la table intelligente, donne toutes les informations dont vous avez besoin: http://lorenzofox3.github.io/smart-table-website/

Ensuite, la question suivante est bootstrap 3: Ce n'est pas exactement mais ce modèle a l'air bien. - Vous pouvez simplement utiliser https://github.com/angular-ui/bootstrap/tree/master/template tous les modèles sont bien écrits.

Je peux continuer sur la façon de convertir bootstrap 3 en angularjs mais son déjà mentionné dans les liens suivants:

• Bootstrap 3 compatible avec les directives de bootstrap AngularJS actuelles?
• https://github.com/angular-ui/bootstrap/issues/331

veuillez noter qu'en ce qui concerne la table intelligente, vous devez vérifier si elle est prête pour votre version angulaire

La grille de Kendo est bonne ainsi que Wijmo. Je sais que Kendo est livré avec des liaisons angulaires pour leur source de données et je pense que Wijmo a un plugin angulaire. Ni l'un ni l'autre ne sont libres cependant.