Le migliori opzioni per una griglia ad albero AngularJS

Question

Da un po 'di tempo, cercavo una Tree Grid che funzioni bene con AngularJS e che non abbia avuto molta fortuna.

miei requisiti sono:

1. Facile da usare
2. Sembra buono
3. supporta il drag and drop
4. in grado di gestire grandi quantità di dati 10000+ (cioè impaginazione/pigro scorrere di 10.000 righe)
5. può mostrare dati gerarchici in una tabella (ad esempio colonne/smistamento)
6. libero/a buon mercato

progetti che si avvicinano:

• Sencha Tree Grid
  • non sembra di giocare bene con AngularJS
  • A quanto pare un modulo Buffered-Tree può aiutare a gestire 1000s o le righe
• angular-ui-tree
  • Vicino ma non supporta le funzioni di tabella come colonne, fuori dalla scatola
  • non gestisce grandi quantità di dati, ma la direttiva dirPaginate di Michael Bromley può risolvere questo
• tree-grid-directive
  • Sembra buono (si adatta con bootstrap)
  • Ha colonne
  • ma che non consentono facilmente di impaginazione/caricamento pigro

Ok ... Quindi, dato che altre persone devono aver risolto questo prima, la mia domanda è:

Qual è il modo migliore per affrontare questo?

Esiste già un progetto che copre tutte le basi? O forse c'è un modo semplice per adattare uno di questi ad essere una griglia albero pigramente caricato ...

Answer 1

Il mio suggerimento sarebbe una griglia UI angolare. Nella sua versione attuale, ci sono molte opzioni di configurazione, anche per gli alberi:

Sito web: http://ui-grid.info/

espandibile Griglia: http://ui-grid.info/docs/#/tutorial/216_expandable_grid

Answer 2

Usa JS Albero

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

pigro carico in JSTree: http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

Answer 3

IgniteUI Tree Grid (da non confondere con il brutto Hierarchical Grid)

Anche se non perfetto, sembra un'opzione ragionevole.

Pro

• sembra abbastanza bello
• ha un paio di plugin per l'ordinamento, il filtraggio, la paginazione, inchiodandolo ecc
• lazy loading dei bambini può essere integrato con l'ascolto di ampliare gli eventi (e forse i InfragisticsLoader)

Contro

• No out-of-the-box AngularJS integrazione
• No "Infinite Scroll" out-of-the-box

La sua anche abbastanza semplice da usare:

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

Qui ho creato un campione jsFiddle qui: http://jsfiddle.net/immersion/qggbs0s6/

Answer 4

So che è una domanda di due mesi, ma avevo bisogno dello stesso e mi sono appena imbattuto in questa griglia Adapt-Strap.

L'ho usato alcuni piccoli esempi e ha funzionato fino ad ora, sembra davvero facile da usare, dispone di trascinamento/impaginazione/caricamento lento.

Penso che valga la pena provarlo, e fyi: non ho alcuna connessione con gli sviluppatori in quel modo.

Answer 5

C'è un codice nativo TreeGrid directive interamente costruito utilizzando AngularJS. Fa parte di IntegralUI Studio per Web, realizzato da Lidor Systems.

È facile da utilizzare e consente di operare con enormi set di dati, senza impaginazione.