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


284

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.


6
Vous devriez certainement jeter un œil à ng-grid ici: angular-ui.github.io/ng-grid
mainguy

1
Pourquoi ne pas utiliser UI Bootstrap? Il a récemment été mis à jour pour utiliser Bootstrap 3: angular-ui.github.io/bootstrap
CallumVass

3
Ces milliers de lignes ne doivent pas toutes être envoyées au client. Par conséquent, une solution JavaScript pure ne fonctionnera pas si bien. Le serveur devra faire la pagination et / ou la recherche pour vous.
flup

La prochaine fois, essayez de donner un coup de feu à la table ngTasty zizzamia.com/ng-tasty/directive/table, il est basé sur la table css d'amorçage :)
zizzamia

3
angulaire se déplace dans " ui-grid " qui aurait les caractéristiques de la table intégrées. une bonne alternative aux "jquery datatables"
diaryfolio

Réponses:


223

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.


12
Je viens de trouver un petit bogue dans Smart Table, je l'ai signalé et il a été corrigé en quelques heures. Je suis étonné que tout le monde n'utilise pas Smart Table - c'est tellement mieux que tous les autres.
Ricky Helgesson

1
Smart Table est définitivement le meilleur choix pour AngularJS. Il y a plus de fonctionnalités dans ngGrid, mais il est facile d'ajouter ces fonctionnalités en étendant Smart Table.
Toilal

1
ng-grid 3.0.7 est maintenant sorti, et cela a bien fonctionné pour moi (maintenant appelé ui-grid)
Kimball Robinson

1
Le problème est: la pagination sur la table intelligente est vraiment moche, pas de première page, pas de dernière page, la pagination ng-table est vraiment plus ergonomique. Même chose pour le tri, sur smart-table on sait juste qu'on peut trier avant de cliquer, ce n'est pas du tout ergonomique ...
amdev

1
Smart Table pour des scénarios triviaux en lecture seule, ui-grid pour tout le reste, ou simplement ui-grid :)
RandomUs1r

116

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

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:

entrez la description de l'image ici

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


2
Wijmo fournit également des directives angulaires ainsi que des fonctionnalités telles que le regroupement, le tri , etc. Vous pouvez également vérifier l'échantillon de référence pour la grille ngGrid et Wijmo avec AngularJS: demos.componentone.com/wijmo/Angular/GridBenchmark/...
Ashish

@Lars Behnke Comment appliquer le style de tableau Bootstrap à ng-grid? Pour autant que j'ai regardé, ng-grid n'utilise pas de balises table tr sur lesquelles comptent les CSS Bootstrap.
elpddev

L'implémentation du composant ng-grid n'est pas basée sur Bootstrap. J'ai donc personnalisé ng-grid.less afin d'obtenir une apparence aussi proche que possible des éléments de l'interface graphique de bootstrap.
Lars Behnke

1
-Grille de projet a été réécrite comme interface utilisateur grille qui est disponible au ui-grid.info
mostar

2
Les statistiques de 2016 montrent que le plugin ng-tables est toujours en demande: GitHub: A. ng-grid: ~ 3500 commits, ~ 800 problèmes. B. smart-table: ~ 300 commits, ~ 40 problèmes. C. ng-table: ~ 500 commits, ~ 200 problèmes. Les tendances de Google prouvent juste la même idée en comparant: "table intelligente angulaire", "grille ui angulaire", "table angulaire ng". google.com/trends/…
Anton Lyhin

87

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:

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.


7
J'étais content de voir quelqu'un mentionner ng-table. Je préfère aussi ng-table à ng-grid car il a un meilleur style, surtout en mode édition.
Rob J

2
Sauter sur le train ngTable ici. Je suis allé avec ng-grid pour un projet et ça a été assez terrible. J'ai choisi ng-grid uniquement en raison de son association avec angular-ui et il semble être un peu plus actif sur github. Je pense que je vais passer à ngTable. Espérons que ce ne sera pas trop difficile.
Brett

10
Hé, débutant avec un écosystème angulaire, j'ai d'abord essayé d'aller avec ng-grid en raison d'un "meilleur" site Web, mais j'ai rapidement rencontré des problèmes de style, en raison de leur structure div profondément imbriquée. Jusqu'à présent, j'aime mieux ng-table, car il utilise en fait a table. Je peux simplement appliquer la classe de table bootstrap et ça marche ...
Pierre Henry

1
Notez que le code et l'approche de smart-table ont radicalement changé avec sa version v1.0.0 (août 2014) donc les commentaires faits avant cette date ne sont plus pertinents
laurent

4
ng-table est pour la plupart devenu inactif car il est entretenu par une seule personne en Ukraine et il y a eu beaucoup d'autres problèmes là-bas. ng-grid est en cours de réécriture en tant que ui-grid pour la version 3.0 mais il n'est pas prêt pour la production. Ce n'est donc généralement pas le bon moment pour choisir ou changer d'implémentation de table angulaire. Smart-Table est également entretenue par plus ou moins une seule personne. Nous utilisons actuellement ng-table, mais nous prévoyons de passer à ui-grid à mesure qu'il mûrit.
Splaktar

77

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.

trNgGrid

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


5
Celui-ci a besoin de plus de reconnaissance. J'ai commencé avec ngGrid. Je ne pouvais pas comprendre quelle version j'étais censé utiliser car je suppose que j'ai commencé à chercher entre leur transition 2.x à 3.x et je n'ai même pas réussi à faire fonctionner la table. Ensuite, je suis passé à ngTablequel type de travail. Je ne pouvais pas faire fonctionner correctement le tri ou la pagination, mais cela était dû à la façon dont je chargeais les données $http. Puis j'ai vu ça trNgGridet la merde sainte ... si facile à monter et à courir. J'aimerais pouvoir écrire plus ici, mais je suggère à tout le monde d'essayer celui-ci en premier!
Ronnie

2
Je suis entièrement d'accord avec @Ronnie. Cela devrait être donné plus d'attention. Après une journée entière de «combats» avec ng-grid / ui-grid pour faire quelque chose d'un peu plus complexe, j'ai essayé trNgGrid et travaillé sur le premier essai.
Johnny Everson du

4
il semble bon, mais ne peut pas trouver des éléments cruciaux comme un en-tête fixe, des colonnes redimensionnables, des colonnes déplaçables, etc.
iLemming

le bootstrap est-il une dépendance difficile? J'aimerais que ma grille utilise un CSS personnalisé. possible?
Jasdeep Singh, le

Cela nécessite plus de reconnaissance. J'étais si près d'aller avec ng-grid jusqu'à ce que je réalise qu'il n'utilise même pas de tables html.
ryanwinchester

39

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


Pouvez-vous nous donner quelques exemples de ces bogues / scénarios qui vous ont donné des maux de tête? Je suis intéressé parce qu'en choisissant l'une des options bien connues (ng-grid, trNgGrid, ng-table, SmartTable) je commence juste par ng-grid et après avoir lu votre post et vu les 10 votes positifs, je viens d'avoir peur!
sports

1
Eh bien, certains d'entre eux ont été corrigés, je pense, ils ont fusionné comme 20 demandes de traction qui étaient là depuis des mois. Les problèmes que j'ai eus? beaucoup d'entre eux étaient parce qu'ils utilisent des divs au lieu de la table pour la composition de la grille. De plus, les événements exposés par la grille sont bogués, ce qui me pose beaucoup de problèmes car j'implémentais un comportement de type défilement infini, l'événement de défilement se déclenchait de manière aléatoire dans certaines situations qui ne devraient pas. La largeur automatique des colonnes ne fonctionne pas du tout.
agusluc

En fin de compte, cela dépendra de la façon dont vous souhaitez utiliser la grille et du niveau de personnalisation requis dans votre projet. Vérifiez le github, lisez les problèmes ouverts, créez une démo qui couvre tous vos cas d'utilisation et voyez comment cela fonctionne. Mais rappelez-vous, le développement de branche 2.x a été abandonné, vous n'aurez donc plus de support à l'avenir.
agusluc

15

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


10

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


+1 C'est vrai. Dommage que DataTables n'ait pas encore été intégré; peut-être trop étroitement couplé au DOM.
CSSian


9

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.


7
Oui, c'est la manière standard de créer une table sans tri, pagination, filtrage, ralaxage ajax, etc. dans Angular. Mais avec des milliers de lignes, cela arrêtera toute application.
mainguy

Cela se traduira par une interface utilisateur très décalée.
boi_echos

8

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>

Est-il possible de changer la largeur des colonnes?
Tomasz Waszczyk

4

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:

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


3

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.


3
J'ai eu une terrible expérience avec KendoUI. Il est tellement gonflé qu'il fonctionne comme un chien et semble être tellement piraté pour les composants plus complexes qu'il est difficile, voire impossible, de faire fonctionner des fonctionnalités qui ne sont pas disponibles "prêtes à l'emploi" pour ainsi dire. Il est également fortement conçu pour fonctionner avec leurs composants serveur et très mal documenté pour les cas marginaux. Je resterais loin d'eux!
Precastic
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.