Il modo migliore per rappresentare una griglia o una tabella in AngularJS con Bootstrap 3? [chiuso]

Sto creando un'app con AngularJS e Bootstrap 3. Voglio mostrare una tabella / griglia con migliaia di righe. Qual è il miglior controllo disponibile per AngularJS e Bootstrap con funzionalità come Ordinamento, Ricerca, Impaginazione, ecc.

Dopo aver provato ngGrid, ngTable, trNgGrid e Smart Table , sono giunto alla conclusione che Smart Table è di gran lunga la migliore implementazione AngularJS-saggio e Bootstrap-saggio. È costruito esattamente come faresti con il tuo tavolo ingenuo usando l'angolazione standard. Inoltre, hanno aggiunto alcune direttive che ti aiutano a fare lo smistamento, il filtraggio ecc. Il loro approccio rende anche abbastanza semplice estenderti. Il fatto che utilizzino i normali tag html per le tabelle e lo standard ng-repeat per le righe e il bootstrap standard per la formattazione rende questo il mio chiaro vincitore.

Il loro codice JS dipende da angolare e il tuo html può dipendere da bootstrap se vuoi. Il codice JS è di 4 kb in totale e puoi anche facilmente selezionare roba da lì se vuoi raggiungere un ingombro ancora più piccolo.

Laddove le altre griglie ti daranno la claustrofobia in diverse aree, Smart Table è semplicemente aperta e mirata.

Se ti affidi fortemente alla modifica in linea e ad altre funzionalità avanzate, ad esempio ngTable potresti iniziare a lavorare più velocemente. Tuttavia, sei libero di aggiungere tali funzionalità abbastanza facilmente in Smart Table.

Da non perdere Smart Table !!!

Non ho alcuna relazione con Smart Table, tranne che dall'usarlo da solo.

Avevo lo stesso requisito e l'ho risolto utilizzando questi componenti:

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0 : compatibile con AngularJS 1.0.8 e Boostrap CSS 3.x.
• ng-grid 2.0.7 : compatibile con AngularJS 1.0.8
• Bootstrap CSS 3.0

Il componente di tabella ng-grid è in grado di visualizzare centinaia di righe in una griglia scorrevole. Se hai a che fare con migliaia di voci, stai meglio usando il paginator di ng-grid. La documentazione di ng-grid è eccellente e contiene molti esempi. L'ordinamento e la ricerca sono supportati anche in combinazione con l'impaginazione.

Ecco uno screenshot di un progetto corrente per darti un'idea di come appare:

[AGGIORNAMENTO luglio 2017]

Dopo aver avuto ng-grid in produzione per un paio d'anni, posso ancora dire che non ci sono problemi importanti con questo componente. Sì, molti bug minori, ma nessun tappo per lo spettacolo (almeno nei miei casi d'uso). Detto questo, ti consiglio vivamente di non utilizzare questo componente se avvii un progetto da zero. Questo componente è una buona opzione solo se si sono tenuti a AngularJS 1.0.x . Se sei libero di scegliere la versione angolare, scegli un nuovo componente. Un elenco di componenti di tabella per Angular 4 è stato compilato da Sam Deering in questo blog .

Con "migliaia di righe" la soluzione migliore sarebbe ovviamente quella di effettuare il paging lato server. Quando ho esaminato le diverse opzioni di tabella / griglia di AngularJs qualche tempo fa c'erano tre chiari preferiti:

• ng-grid
• ng-table
• Smart-Tabella

Tutti e tre sono buoni, ma implementati in modo diverso. Quale sceglierai sarà probabilmente più basato sulle preferenze personali di ogni altra cosa.

ng-grid è probabilmente il più noto a causa della sua associazione con angular-ui, ma personalmente preferisco ng-table , mi piace molto la loro implementazione e il modo in cui lo usi, e hanno una grande documentazione ed esempi disponibili e attivamente migliorati.

Una griglia angolare ricca di funzionalità è questa:

trNgGrid

Alcune delle sue caratteristiche:

• È stato costruito pensando alla semplicità.
• Sta usando semplici tabelle HTML, consentendo ai browser di ottimizzare il rendering.
• Completamente dichiarativo, preservando la separazione delle preoccupazioni, permettendoti così di descriverlo completamente in HTML, senza incasinare i tuoi controller.
• È completamente personalizzabile tramite modelli e attributi associati a dati bidirezionali.
• Facile da mantenere, con il codice scritto in TypeScript.
• Ha un elenco molto breve di dipendenze: AngularJs e Bootstrap CSS, con temi Bootswatch opzionali.

Godere. Sì, sono l'autore. Mi sono stufato di tutte le griglie angolari là fuori.

Per chiunque legga questo post: fatevi un favore e state alla larga da ng-grid. È pieno di bug (davvero ... quasi ogni parte della lib è rotta in qualche modo), gli sviluppatori hanno abbandonato il supporto del ramo 2.0.x per funzionare in 3.0 che è molto lontano dall'essere pronto. Risolvere i problemi da soli non è un compito facile, il codice ng-grid non è piccolo e non è semplice, a meno che tu non abbia molto tempo e una profonda conoscenza di angolare e js in generale, sarà un compito difficile.

Bottom Line: è pieno di bug e l'ultima versione stabile è stata abbandonata.

Il github è pieno di PR, ma vengono ignorati. E se si segnala un bug nel ramo 2.x, viene chiuso.

So che è un progetto open source e le lamentele possono sembrare un po 'fuori posto, ma dal punto di vista di uno sviluppatore alla ricerca di una biblioteca, questa è la mia opinione. Ho trascorso molte ore a lavorare con ng-grid in un grande progetto e le emicranie non finiscono mai

TrNgGrid sta funzionando alla grande finora. Ecco i motivi per cui preferisco ng-grid e spostato in questo componente

• Rende gli elementi della tabella in modo che possa essere bootwatch e utilizzare tutta la potenza di bootstrap .css (ng-grid utilizza temi dell'interfaccia utente jQuery).

• Opzioni di griglia semplici e ben documentate.

• Il paging delle dimensioni del server funziona

Alla fine di questa risposta alla domanda su come pensare in angolare se si ha uno sfondo jQuery, il post in alto di Josh David Miller riassume:

Non usare nemmeno jQuery. Non includerlo nemmeno. Ti terrà indietro. E quando arrivate a un problema che pensate di sapere già come risolvere in jQuery, prima di raggiungere il $, provate a pensare a come farlo entro i confini di AngularJS. Se non lo sai, chiedi! 19 volte su 20, il modo migliore per farlo non ha bisogno di jQuery e provare a risolverlo con i risultati di jQuery richiede più lavoro per te.

Ora, se vuoi una griglia con tonnellate di funzionalità e opzioni per la personalizzazione, jQuery DataTables è uno dei migliori. Le griglie solo angolari che ho visto non si avvicinano a ciò che jQuery DataTables può fare.

Tuttavia , jQuery DataTables non si integra bene con AngularJS. (Ci sono stati vari sforzi, ma nessuno offre una perfetta integrazione.)

Forse questo lascia una persona con due opzioni.

Il primo è quello di utilizzare una griglia angolare pura che non sia così ricca di funzionalità come DataTables. Sono d'accordo con @Moonstom sul fatto che mi stufi delle altre griglie angolari là fuori, e trNgGrid sembra carino.

La seconda opzione è quella di dire: questo è uno di quei rari casi su 1 in cui dovresti usare jQuery e utilizzare il plug-in jQuery DataTables, perché gli sforzi per reinventare la ruota con le pure griglie angolari hanno prodotto un ruota meno robusta di DataTables.

Sarebbe bello se fosse diversamente, ma non ho visto l'ecosistema Angular creare una griglia così forte come jQuery DataTables, e non è come se una buona griglia di dati sia piacevole da avere in un'app Web : una buona griglia è essenziale.

È possibile utilizzare le classi bootstrap 3 e creare una tabella usando la direttiva ng-repeat

Esempio:

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>

esempio live: http://jsfiddle.net/choroshin/5YDJW/5/

Aggiornare:

oppure puoi sempre provare la popolare ng-grid , ng-grid è buona per ordinare, cercare, raggruppare ecc., ma non l'ho ancora testato su dati su larga scala.

Adapt-Strap . Ecco il violino .

È estremamente leggero e ha altezze di fila dinamiche.

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

Come menzionato in altre risposte: per una tabella con ricerca, selezionare e impaginare " ng-grid " è la migliore opzione. Un paio di cose che ho riscontrato menzionerò che potrebbero essere utili durante l'implementazione:

Per impostare env:

1. http://www.json-generator.com/ per generare dati JSON. È uno strumento piuttosto interessante per ottenere il tuo set di dati di esempio per velocizzare lo sviluppo.

2. Puoi controllare questo plunker per la tua implementazione. Ho modificato per includere: ricerca, selezione e paginazione http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Puoi controllare questo tutorial su Smart table, Fornisce tutte le informazioni di cui hai bisogno: http://lorenzofox3.github.io/smart-table-website/

Quindi la domanda successiva è bootstrap 3: non è esattamente, ma questo modello sembra buono. - Puoi semplicemente usare https://github.com/angular-ui/bootstrap/tree/master/template tutti i modelli sono ben scritti.

Posso continuare su come convertire bootstrap 3 in angularjs ma è già menzionato nei seguenti link:

• Bootstrap 3 compatibile con le attuali direttive bootstrap di AngularJS?
• https://github.com/angular-ui/bootstrap/issues/331

si prega di notare che per quanto riguarda lo smart-table è necessario verificare se è pronto per la versione angolare

La griglia di Kendo è buona così come Wijmo. So che Kendo viene fornito con i collegamenti angolari per l'origine dati e penso che Wijmo abbia un plug-in angolare. Né sono gratuiti però.