Bestes Open-Source-Raster mit nahtlosem Scrolling

Als ich anfing, an meinem aktuellen Projekt zu arbeiten, wurde mir eine ziemlich mühsame Aufgabe übertragen - etwas zu bauen, das im Wesentlichen eine große Tabellenkalkulation ersetzen sollte, die Leute intern in meiner Firma verwenden.

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

Also mussten wir ein Raster mit netten unendlichen Scrolls erstellen. Versteh mich nicht falsch, ich habe viele verschiedene Lösungen ausprobiert. Zuerst habe ich Vanilla-ng-repeat thing erstellt und versucht, ng-infinite-scroll und dann ng-scroll von 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, ng-if s oder Filter verwendet hatte. Sehr bald wurde die Performance mein größter Schmerz. Als ich angefangen habe, Dinge wie skalierbare Spalten und benutzerdefinierte Zellenvorlagen hinzuzufügen, konnte kein Browser mehr mit all diesen Bindungen fertig werden.

Dann versuchte ich ng-grid , und zuerst mochte ich es irgendwie - einfach zu benutzen, es hat ein paar nette Features, 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 Features, nach denen ich sofort gesucht habe. p>

ng-table sah nicht viel anders aus als ng-grid, wahrscheinlich hätte es mich genauso verursacht Leistungsprobleme.

Und natürlich musste ich einen Weg finden, Bindungen zu optimieren. Die versuchte Bindung - einmal - war nicht zufrieden, das Raster war immer noch lückig. (upd: angular 1.3 bietet {{::foo}} Syntax für einmalige Bindung)

Dann habe ich React versucht. 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. All meine Bemühungen, einen guten automatischen Test zu erstellen, scheiterten - ich konnte keinen Weg finden, React und PhanthomJS so zu machen, dass sie sich mögen (was wahrscheinlich mehr das Problem von Phantom ist. Gibt es einen besseren kopflosen Browser) Reagiert auch nicht Lösen Sie nicht das Problem "an DOM anhängen" - wenn Sie neue Elemente in das Datenarray 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 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 zu versuchen und mir Geschichten darüber zu erzählen, dass dies das beste Grid-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 mochte es wirklich, wirklich sehr. 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 eckigen Zen abzuweichen und das Scrollen noch flüssig zu machen. Leider ist es keine komplette Grid-Widget-Lösung - Sie haben keine veränderbaren Spalten und andere Dinge, die nicht mitgeliefert werden, die Dokumentation fehlt etwas, usw.

Auch ich fand diesen Artikel und hatte gemischte Gefühle darüber Jungs haben ein paar nicht dokumentierte Hacks auf eckig angewendet und wahrscheinlich würden diese mit Feature-Versionen von eckig brechen.

Natürlich gibt es zumindest 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 kannst du nicht selektiv nur für das Grid-Widget zahlen, du musst ganze Suite kaufen - voll mit Scheiße benutze ich wahrscheinlich nie.

Also, endlich zu meiner Frage - gibt es einen guten, garantierten, weniger schmerzhaften Weg, ein nettes Gitter mit unendlichem Scrollen 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.