La migliore griglia open source con scorrimento uniforme e infinito

Question

Quando ho iniziato a lavorare al mio progetto corrente mi è stato assegnato un compito piuttosto arduo: costruire qualcosa che in sostanza suppone sostituire il grande foglio di calcolo che le persone usano internamente nella mia azienda.

Ecco perché abbiamo pensato che un tavolo impaginato non avrebbe mai funzionato, e onestamente penso che la paginazione sia stupida. La visualizzazione di dati che cambiano dinamicamente su una tabella impaginata è zoppa. Supponiamo che un articolo alla pagina 2 con il prossimo aggiornamento dei dati possa atterrare sulla pagina qualunque.

Quindi abbiamo bisogno di costruire una griglia con una bella scroll infinita. Non fraintendermi, ho provato molte soluzioni diverse. Innanzitutto, ho creato la cosa di vanilla ng-repeat e ho provato a utilizzare ng-infinite-scroll e quindi ng-scroll from UI.Utils. Questo mi porta rapidamente al punto in cui lo scrolling diventa dolorosamente lento e non ho nemmeno usato cose pazzesche come complicati modelli di celle, ng-if s o filtri. Molto presto le prestazioni sono diventate il mio più grande dolore. Quando ho iniziato ad aggiungere elementi come colonne ridimensionabili e modelli di celle personalizzate, nessun browser poteva gestire tutti questi binding.

Poi ho provato ng-grid, e all'inizio mi piaceva un po '- è facile da usare, ha alcune caratteristiche interessanti di cui avevo bisogno, ma presto mi sono reso conto che ng-grid è terribile. La versione corrente è piena di bug, tutti i contributori hanno smesso di correggerli e sono passati a lavorare su una versione successiva. E solo Dio sa quando sarà pronto per l'uso. ng-grid si è rivelata decisamente peggiore persino della vanilla ng-repeat.

Ho continuato a cercare di trovare qualcosa di meglio. trNgGrid sembrava buono, ma troppo semplicistico e non offre funzionalità che stavo cercando fuori dalla scatola.

ng-table non sembrava molto diverso da ng-grid, probabilmente mi avrebbe causato gli stessi problemi di prestazioni.

E ovviamente avevo bisogno di trovare un modo per ottimizzare i collegamenti. Provato bind-once - non era soddisfatto, la griglia era ancora in ritardo. (upd: angular 1.3 offre la sintassi {{::foo}} per il binding una tantum)

Quindi ho provato React. L'esperimento iniziale sembrava promettente, ma per costruire qualcosa di più complicato ho bisogno di imparare le specifiche React, inoltre quella cosa si sente un po 'non angoleresca e chissà come testare le direttive costruite con angolare + reagire. Tutti i miei sforzi per costruire dei buoni test automatici sono falliti - non sono riuscito a trovare un modo per far piacere a React e PhanthomJS l'un l'altro (che è probabilmente un problema più fantasma.) C'è anche il browser headless) Anche React non risolve "accodamento al DOM "- quando si inseriscono nuovi elementi nell'array di dati, per alcuni millisecondi il browser blocca il thread dell'interfaccia utente. Questo ovviamente è un tipo di problema completamente diverso.

Il mio collega (che sta lavorando sul lato server delle cose) dopo aver visto le mie difficoltà, mi ha fatto notare che ho già speso troppo, cercando di risolvere problemi di prestazioni. Mi ha fatto provare SlickGrid, raccontandomi storie su come questo sia il miglior widget di griglia. L'ho provato sinceramente e volevo rapidamente masterizzare il mio computer. Questa cosa dipende completamente da jQuery e dal mazzo di plugin jQueryUI e mi rifiuto di abbandonare improvvisamente i tempi medievali dello sviluppo del web e perdere ogni bontà angolare. No grazie.

Poi sono arrivato da ux-angularjs-datagrid e mi è davvero piaciuto molto. Usa alcuni algoritmi intelligenti per mantenere le cose molto reattive. Il progetto è giovane, ma sembra molto promettente. Sono stato in grado di costruire una griglia di base con un sacco di file (intendo un numero enorme di file) senza allontanarmi troppo dal modo di zen angolare e scorrere ancora liscio.Sfortunatamente non è una soluzione completa per la griglia: non ci sono colonne ridimensionabili e altre cose fuori dalla scatola, la documentazione è in qualche modo carente, ecc.

Anche io ho trovato questo article e avevo sentimenti contrastanti a riguardo, questi ragazzi applicato alcuni hack non documentati ad angolari e molto probabilmente quelli che si rompono con versioni di funzioni angolari.

Naturalmente ci sono almeno un paio di opzioni a pagamento come Wijmo e Kendo UI. Quelli sono compatibili con l'angolare, tuttavia gli esempi mostrati sono semplici tabelle impaginate e non sono sicuro che valga la pena di provarli. Potrei finire per avere gli stessi problemi di prestazioni. Inoltre non puoi pagare in modo selettivo solo per il widget della griglia, devi comprare tutta la suite - piena di merda che probabilmente non uso mai.

Quindi, finalmente alla mia domanda - c'è un modo buono, garantito, meno doloroso di avere una bella griglia con scrolling infinito? Qualcuno può puntare a buoni esempi, progetti o pagine web? È sicuro usare ux-angularjs-datagrid o meglio per costruire la mia cosa usando angolare e reagire? Qualcuno ha mai provato le griglie Kendo o Wijmo?

Per favore! Non votare per chiudere questa domanda, so che ci sono molte domande simili su StackOverflow, e ne ho letto quasi tutte, ma la domanda rimane aperta.

Answer 1

Forse il problema non è con i widget esistenti ma più con il modo in cui lo si utilizza. Devi capire che oltre 2000 cicli di digest angolare dei binding possono richiedere troppo tempo affinché l'interfaccia utente renda liscio. Nella stessa idea i nodi più html che hai sulla tua pagina, più memoria userai e potresti raggiungere la capacità del browser per rendere così tanti nodi in modo agevole. Questo è uno dei motivi per cui le persone usano questa impaginazione "zoppa".

Alla fine ciò che è necessario ottenere per ottenere qualcosa di "liscio" è limitare la quantità di dati visualizzati nella pagina. Per renderlo trasparente puoi fare l'impaginazione sullo scroll.

This plunker mostra l'idea, con smart-table. Quando si scorre verso il basso, viene caricata la pagina successiva (sarà necessario implementare la pagina precedente durante lo scorrimento verso l'alto). E in qualsiasi momento l'importo massimo di righe è 40.

function getData(tableState) { 

      //here you could create a query string from tableState 
      //fake ajax call 
      $scope.isLoading = true; 

      $timeout(function() { 

       //if we reset (like after a search or an order) 
       if (tableState.pagination.start === 0) { 
        $scope.rowCollection = getAPage(); 
       } else { 
        //we load more 
        $scope.rowCollection = $scope.rowCollection.concat(getAPage()); 

        //remove first nodes if needed 
        if (lastStart < tableState.pagination.start && $scope.rowCollection.length > maxNodes) { 
         //remove the first nodes 
         $scope.rowCollection.splice(0, 20); 
        } 
       } 

       lastStart = tableState.pagination.start; 

       $scope.isLoading = false; 
      }, 1000); 

     } 

Questa funzione viene chiamata ogni volta che l'utente scorrimento verso il basso e raggiunge una soglia (con acceleratore ovviamente per motivi di performance)

ma la parte importante è dove rimuovi le prime voci nel modello se hai caricato più di una determinata quantità di dati.

Answer 2

Vorrei portare la vostra attenzione verso Angular Grid. Ho avuto esattamente gli stessi problemi che hai detto, così ho finito per scrivere (e condividere) il mio widget di griglia. Può gestire dataset di grandi dimensioni e ha uno scrolling eccellente.