Meilleure façon de représenter une grille ou une table dans AngularJS avec Bootstrap 3?
Je crée une application avec AngularJS et Bootstrap 3. Je souhaite afficher un tableau/une grille comportant des milliers de lignes. Quel est le meilleur contrôle disponible pour AngularJS & Bootstrap avec des fonctionnalités telles que le tri, la recherche, la pagination, etc.
Après avoir essayé ngGrid, ngTable, trNgGrid et Smart Table , je suis parvenu à la conclusion que Smart Table est de loin la meilleure implémentation entre AngularJS et Bootstrap. Il est construit exactement de la même manière que vous construiriez votre propre table naïve en utilisant angular standard. En plus de cela, ils ont ajouté quelques directives qui vous aident à trier, filtrer, etc. Leur approche permet également de s’étendre très facilement. Le fait qu'ils utilisent les balises html habituelles pour les tableaux et le ng-repeat standard pour les lignes et le standard bootstrap pour la mise en forme en fait clairement mon vainqueur.
Leur code JS dépend de angular et votre code HTML peut dépendre de bootstrap si vous le souhaitez. Le code JS mesure 4 kb au total et vous pouvez même facilement en extraire des éléments si vous souhaitez atteindre un encombrement encore plus réduit.
Si les autres réseaux vous exposent à la claustrophobie dans différents domaines, Smart Table se sent juste ouvert et pertinent.
Si vous vous fiez beaucoup à l'édition en ligne et à d'autres fonctionnalités avancées, vous pouvez par exemple être plus rapide avec ngTable. Cependant, vous êtes libre d'ajouter de telles fonctionnalités assez facilement dans Smart Table.
Ne manquez pas Smart Table !!!
Je n'ai aucun lien avec Smart Table, si ce n'est de l'utiliser moi-même.
J'ai eu la même exigence et résolu en utilisant ces composants:
- AngularJS 1.0.8
- AngularUI Boostrap 0.10. : 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.
Le composant de tableau ng-grid est capable d'afficher des centaines de lignes dans une grille à défilement. Si vous devez gérer des milliers d'entrées, il vaut mieux utiliser la pagination 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 idée de son apparence:
[UPDATE Juillet 2017]
Après avoir eu 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 de blocage des shows (du moins dans mes cas d'utilisation). Cela dit, je vous déconseille fortement d’utiliser ce composant si vous démarrez un projet à partir de rien. Ce composant est une bonne option uniquement si vous êtes lié à AngularJS 1.0.x . Si vous êtes libre de choisir la version Angular, optez pour un composant plus récent. Une liste de composants de table pour Angular 4 a été compilée par Sam Deering dans ce blog .
Avec "des milliers de lignes", votre meilleure option serait évidemment de faire de la pagination côté serveur. Lorsque je me suis penché sur les différentes options de table/grille AngularJs il y a quelque temps, il y avait trois favoris clairs:
Tous les trois sont bons, mais mis en œuvre différemment. Lequel vous choisirez 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 beaucoup leur implémentation et son utilisation, et ils ont une excellente documentation et des exemples disponibles et sont activement améliorés.
Une grille riche en fonctionnalités Angular est celle-ci:
Quelques unes de ses caractéristiques:
- A été construit avec la 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 problèmes, vous permettant ainsi de le décrire complètement 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 à maintenir, ayant le code écrit en TypeScript.
- A une très courte liste de dépendances: AngularJs et Bootstrap CSS, avec les thèmes optionnels de Bootswatch.
Prendre plaisir. Oui, je suis l'auteur. J'en ai marre de toutes les Angular grilles.
Pour tous ceux qui liront ce post: Faites-vous plaisir et éloignez-vous de ng-grid. Est plein de bugs (en réalité, presque chaque partie de la bibliothèque est cassée), les développeurs ont abandonné le support de la branche 2.0.x pour pouvoir fonctionner en 3.0, ce qui est très loin d'être prêt. Résoudre les problèmes vous-même n’est pas une tâche facile, le code-grille n’est ni petit, ni simple, à moins que vous n’ayez beaucoup de temps et une connaissance approfondie de angular et de js en général, sa va être une tâche difficile.
Résultat final: est plein de bogues 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 que les plaintes peuvent paraître un peu déplacées, mais du point de vue d'un développeur cherchant une bibliothèque, c'est mon avis. J'ai passé de nombreuses heures à travailler avec ng-grid dans un grand projet et les caches-tête ne finissent jamais
TrNgGrid fonctionne très bien jusqu'à présent. Voici les raisons pour lesquelles je le préfère à ng-grid et déplacé à ce composant
Il crée des éléments de tableau pour qu’il puisse être surveillé avec le démarrage et utiliser toute la puissance de bootstrap .css (ng-grid utilise des thèmes d’interface utilisateur jQuery).
Options de grille simples et bien documentées.
La pagination de taille de serveur fonctionne
À la fin de cette réponse à la question de savoir comment penser dans Angular si vous avez un background jQuery, le commentaire de Josh David Miller résume:
N'utilisez même pas jQuery. Ne l'incluez même pas. Cela vous retiendra. Et quand vous arrivez à un problème que vous pensez déjà pouvoir résoudre dans jQuery, avant d’atteindre le
$, essayez de réfléchir à la façon de le résoudre 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 essayer de le résoudre avec des résultats jQuery demande plus de travail.
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.)
Peut-être que cela laisse une personne avec deux options.
La première consiste à utiliser une grille Angular pure qui n’est pas aussi riche en fonctionnalités que DataTables. Je suis d'accord avec @Moonstom pour en avoir marre des autres grilles Angular, et trNgGrid n'a pas l'air sympa.
La deuxième option consiste à dire: c’est l’un de ces cas rares 1 sur 20 où vous devriez utilise jQuery et utilise le plug-in jQuery DataTables, car les efforts pour réinventer la roue avec les grilles pures Angular 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 créer une grille aussi solide que jQuery DataTables, et ce n'est pas comme si une bonne grille de données était un outil agréable à utiliser. dans une application web: une bonne grille est essentielle.
Vous pouvez utiliser les classes bootstrap 3 et construire 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/
Mise à jour:
ou vous pouvez toujours essayer le populaire ng-grid , ng-grid est bon pour le tri, la recherche, le regroupement, etc., mais je ne l'ai pas encore testé sur des données à grande échelle.
Adapt-Strap . Voici le violon .
Il est extrêmement léger et possède 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 indiqué dans d'autres réponses: Pour un tableau avec recherche, sélectionnez et la pagination " ng-grid " est la meilleure des options. Je mentionnerai quelques éléments qui pourraient être utiles lors de la mise en œuvre:
Pour définir env:
http://www.json-generator.com/ pour générer des données JSON. C’est un outil très intéressant pour obtenir votre échantillon de données afin d’accélérer le développement.
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 Smart table, qui 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 ces modèles ont une belle apparence. - Vous pouvez simplement utiliser https://github.com/angular-ui/bootstrap/tree/master/template tous les modèles sont bien écrits.
Je peux vous expliquer comment convertir bootstrap 3 en angularjs, mais cela a déjà été mentionné dans les liens suivants:
- Bootstrap 3 compatible avec les directives AngularJS bootstrap actuelles?
- https://github.com/angular-ui/bootstrap/issues/331
veuillez noter qu'en ce qui concerne smart-table, vous devez vérifier si elle est prête pour votre version angular
La grille de Kendo est bonne aussi bien que Wijmo. Je sais que Kendo est livré avec Angular bindings pour sa source de données et je pense que Wijmo a un plugin Angular. Ni sont libres si.