Bestes Open-Source-Grid mit weichem, endlosem Scrolling

Question

Als ich anfing, an meinem aktuellen Projekt zu arbeiten, bekam ich eine ziemlich schwierige Aufgabe - etwas zu bauen, das im Grunde genommen große Tabellenkalkulationen in meinem Unternehmen ersetzen sollte.

Deshalb dachten wir, dass ein paginierter Tisch niemals funktionieren würde, und ganz ehrlich, ich denke, Seitenumbruch ist dumm. Das Anzeigen von sich dynamisch ändernden Daten in einer paginierten Tabelle ist lahm. Sagen Sie einen Artikel auf Seite 2 mit der nächsten Datenaktualisierung kann auf der Seite landen, was auch immer.

Also mussten wir ein Raster mit schönen unendlichen Blättern erstellen. Versteh mich nicht falsch, ich habe viele verschiedene Lösungen ausprobiert. Zuerst baute ich Vanille-ng-repeat thing und versuchte mit ng-infinite-scroll und dann ng-scroll from UI.Utils. Das brachte mich schnell zu dem Punkt, an dem das Scrollen schmerzhaft langsam wurde und ich nicht einmal irgendwelche verrückten Sachen wie komplizierte Zellvorlagen, Filter oder Filter verwendet hatte. Sehr bald wurde die Performance mein größter Schmerz. Als ich anfing, Dinge wie skalierbare Spalten und benutzerdefinierte Zellenvorlagen hinzuzufügen, konnte kein Browser mehr all diese Bindungen verarbeiten.

Dann versuchte ich ng-grid, und zuerst mochte ich es irgendwie - einfach zu bedienen, es hat ein paar nette Funktionen, die ich brauchte, aber bald erkannte ich - ng-Grid ist schrecklich. Aktuelle Version voller Bugs, alle Mitwirkenden hörten auf, diese zu reparieren und wechselten zur nächsten Version. Und nur Gott weiß, wann das bereit sein wird. NG-Grid erwies sich als viel schlimmer als sogar Vanille ng-repeat.

Ich habe versucht, etwas besseres zu finden. trNgGrid sah gut aus, aber viel zu einfach und bietet keine Funktionen, die ich für die Out-of-the-Box gesucht habe.

ng-table sah nicht viel anders aus ng-Grid, wahrscheinlich hätte es mich gleiche Leistungsprobleme verursacht.

Und natürlich musste ich einen Weg finden, Bindungen zu optimieren. Versucht bind-once - war nicht zufrieden, Raster war noch lückig. (upd: winkel 1.3 Angebote {{::foo}} Syntax für einmalige Bindung)

Dann habe ich versucht React. Das erste Experiment sah vielversprechend aus, aber um etwas Komplizierteres zu bauen, muss ich React specifics lernen, außerdem fühlt sich das Ding irgendwie nicht-angulesken an und wer weiß wie man mit angular + react gebaute Direktiven testet. Alle meine Bemühungen, um eine gute automatisierte Tests zu bauen, scheiterten - ich konnte keinen Weg finden, React und PhanthomJS sich ähnlich zu machen (das ist wahrscheinlich mehr Phantom Problem. Gibt es besseren kopflosen Browser) Reagiert auch nicht "Anhängen zu DOM "-Problem - wenn Sie neue Elemente in den Datenbereich schieben, blockiert der Browser einige Millisekunden lang den UI-Thread. Das ist natürlich eine ganz andere Art von Problem.

Mein Kollege (der an der Serverseite der Dinge arbeitet), nachdem er meine Kämpfe gesehen hatte, schimpfte zu mir, dass ich bereits zu viel ausgegeben habe, um Leistungsprobleme zu lösen. Er hat mich dazu gebracht, SlickGrid auszuprobieren und mir Geschichten zu erzählen, wie das beste Riff-Widget ist. Ich habe es ehrlich gesagt versucht und wollte schnell meinen Computer brennen. Das Ding hängt völlig von jQuery und Bündel von jQueryUI plugins ab und ich weigere mich, plötzlich zu mittelalterlichen Zeiten der Web-Entwicklung zu fallen und alle Winkelgüte zu verlieren. Nein danke.

Dann kam ich durch ux-angularjs-datagrid, und ich wirklich, wirklich, wirklich gemocht es. Es verwendet einen cleveren Bad-Ass-Algorithmus, um die Dinge sehr reaktionsschnell zu halten. Das Projekt ist jung, sieht aber sehr vielversprechend aus. Ich war in der Lage, ein Grundraster mit vielen Reihen (ich meine eine große Anzahl von Reihen) zu bauen, ohne zu sehr von der Art des kantigen Zen abzuweichen und das Scrollen immer noch flüssig zu machen.Leider ist es keine komplette Raster-Widget-Lösung - Sie haben keine Größe Spalten und andere Dinge aus der Box, Dokumentation fehlt etwas, etc.

Auch ich fand diese article, und hatte gemischte Gefühle darüber, diese Jungs wendete einige nicht dokumentierte Hacks auf eckig an und höchstwahrscheinlich würden diese mit Feature-Versionen von eckig brechen.

Natürlich gibt es mindestens einige kostenpflichtige Optionen wie Wijmo und Kendo UI. Diese sind mit eckigen kompatibel, aber die gezeigten Beispiele sind ziemlich einfach paginierte Tabellen und ich bin mir nicht sicher, ob es sich lohnt, sie sogar auszuprobieren. Ich könnte am Ende die gleichen Leistungsprobleme haben. Auch kann man nicht selektiv nur für das Gitter-Widget bezahlen, man muss ganze Suite kaufen - voll mit Scheiße nutze ich wohl nie.

So, endlich zu meiner Frage - gibt es gute, garantierte, weniger schmerzhafte Möglichkeit, schöne Gitter mit unendlichen Blättern zu haben? Kann jemand auf gute Beispiele, Projekte oder Webseiten verweisen? Ist es sicher, ux-angularjs-datagrid oder besser zu verwenden, um mein eigenes Ding mit eckigen und reagieren zu bauen? Hat jemand schon mal Kendo oder Wijmo Grids ausprobiert?

Bitte! Stimmen Sie nicht für das Schließen dieser Frage, ich weiß, es gibt viele ähnliche Fragen zu stackoverflow, und ich lese fast jeden einzelnen von ihnen, aber die Frage bleibt offen.

Answer 1

Vielleicht ist das Problem nicht mit den vorhandenen Widgets, sondern mehr mit der Art, wie Sie es verwenden. Sie müssen verstehen, dass über 2000 Bindungen eckige Digest-Zyklen zu lange dauern können, damit die Benutzeroberfläche reibungslos gerendert werden kann. In der gleichen Idee, je mehr HTML-Knoten Sie auf Ihrer Seite haben, desto mehr Speicher werden Sie verwenden, und Sie könnten die Browser-Kapazität erreichen, um so viele Knoten auf eine glatte Art zu rendern. Dies ist einer der Gründe, warum Menschen diese "lahme" Seitennummerierung verwenden.

Am Ende, was Sie erreichen müssen, um etwas "glatt" zu erhalten, ist die Menge der angezeigten Daten auf der Seite zu begrenzen. Um es transparent zu machen, können Sie die Paginierung auf Bildlauf durchführen.

This plunker zeigt Ihnen die Idee, mit smart-table. Wenn Sie nach unten scrollen, wird die nächste Seite geladen (Sie müssen die vorherige Seite beim Scrollen implementieren). Und die maximale Menge an Reihen, jederzeit 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); 

     } 

Diese Funktion wird aufgerufen, wenn der Benutzer nach unten scrollen und eine Schwelle erreichen (mit Drossel natürlich für die Leistungs Grund)

aber der wichtige Teil ist Hier entfernen Sie die ersten Einträge im Modell, wenn Sie mehr als eine bestimmte Datenmenge geladen haben.

Answer 2

Ich möchte Ihre Aufmerksamkeit auf Angular Grid lenken. Ich hatte genau die gleichen Probleme wie du gesagt hast, also habe ich mein eigenes Raster-Widget geschrieben (und geteilt). Es kann sehr große Datensätze verarbeiten und verfügt über hervorragende Scrollfunktionen.