web-dev-qa-db-fra.com

Meilleures options pour une grille d’arbres AngularJS

Je recherche depuis longtemps un Tree Grid qui fonctionne bien avec AngularJS et qui n’a pas eu beaucoup de chance.

Mes exigences sont:

  1. Facile à utiliser
  2. Cela semble bon
  3. Prend en charge le glisser-déposer
  4. Peut traiter une grande quantité de données 10000+ (par exemple, pagination/défilement paresseux de plus de 10 000 lignes)
  5. Peut afficher des données hiérarchiques dans une table (par exemple, colonnes/tri)
  6. Gratuit/pas cher

Des projets qui se rapprochent:

  • Grille d'arbre Sencha
    • Ne semble pas bien jouer avec AngularJS
    • Apparemment, un module Buffered-Tree peut aider à gérer des milliers ou des lignes
  • angular-ui-tree
    • Fermer mais ne prend pas en charge les fonctions de table telles que les colonnes, prêtes à l'emploi
    • Ne gère pas les données volumineuses, mais la directive dirPaginate de Michael Bromley peut résoudre ce problème
  • directive-arbre-grille
    • Semble bon (convient avec bootstrap)
    • A des colonnes
    • Mais ne permet pas facilement de pagination/chargement paresseux

Ok ... alors, étant donné que d'autres personnes ont déjà résolu ce problème, ma question est la suivante:

Quelle est la meilleure façon d'aborder cela?

Existe-t-il déjà un projet couvrant toutes les bases? Ou peut-être existe-t-il un moyen simple d'adapter l'un d'entre eux à une grille d'arbres chargée paresseusement ...

angularjsgridviewtreeviewlazy-loading
20
Dylan Watson

Ma suggestion serait Angular UI-Grid. Dans sa version actuelle, il existe de nombreuses options de configuration, également pour les arbres:

Site Web: http://ui-grid.info/

Grille extensible: http://ui-grid.info/docs/#/tutorial/216_expandable_grid

2
user2227400

IgniteUI Tree Grid (à ne pas confondre avec le laid Hierarchical Grid )

Bien que ce ne soit pas parfait, cela semble être une option raisonnable.

Avantages

  • Semble assez gentil
  • A quelques plugins pour trier, filtrer, paginer, épingler etc.
  • Le chargement paresseux des enfants peut être intégré en écoutant des événements expand (et éventuellement le InfragisticsLoader )

Les inconvénients

  • Pas d'intégration prête à l'emploi avec AngularJS
  • Pas de "défilement infini" prêt à l'emploi

C'est aussi très simple à utiliser:

$("#treegrid").igTreeGrid({
    width: "100%",
    dataSource: data,
    primaryKey: "employeeID",
    columns: [
        { headerText: "Employee ID", key: "employeeID", dataType: "number" },
        { headerText: "Name", key: "name", dataType: "string" }
    ]
});

J'ai créé un exemple de jsFiddle ici: http://jsfiddle.net/immersion/qggbs0s6/

5
Dylan Watson

Je sais que c'est une question vieille de deux mois, mais j'avais besoin de la même chose et je viens de tomber sur cette grille Adapt-Strap .

Je l'ai utilisé avec quelques petits exemples et a bien fonctionné jusqu'à présent, semble très facile à utiliser, a glisser-déposer/pagination/chargement paresseux.

Je pense que cela vaut la peine d'essayer et fyi: je n'ai aucun lien avec les développeurs de ce pays.

5
bolovan

Utiliser l'arbre JS

http://ezraroi.github.io/ngJsTree/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation

Lazy Load dans JSTree: http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

0
Kiran