最佳开源网格流畅，无限滚动 [英] Best open-source grid with smooth, infinite scrolling

问题描述

当我开始我的当前项目的工作我获得了一个相当艰巨的任务 - 建立一些在本质上想取代大S preadsheet人在我公司内部使用。

When I started working on my current project I was given quite an arduous task - to build something that in essence suppose to replace big spreadsheet people use internally in my company.

这就是为什么我们心想分页表永远不会工作，坦白地说，我认为分页是愚蠢的。显示在分页表动态变化的数据是瘸子。说页＃2下次更新的项目可以任何网页上登陆。

That's why we I thought a paginated table would never work, and quite honestly I think pagination is stupid. Displaying dynamically changing data on a paginated table is lame. Say an item on page #2 with next data update can land on page whatever.

因此​​，我们需要建立与漂亮的无限滚动的网格。不要误会我的意思，我已经尝试了许多不同的解决方案。首先，我建香草NG-重复的事情，使用 NG-无限滚动，然后的ng-scroll从UI.Utils 的。这很快得到我的地步，滚动变得十分缓慢，而且我甚至还没有使用过任何疯狂的事情一样复杂的细胞模板， NG-如果 s或过滤器。很快，性能成了我最大的痛。当我开始添加的东西，如可调整大小的列和自定义模板的细胞，没有浏览器可以处理了所有的绑定。

So we needed to build a grid with nice infinite scroll. Don't get me wrong, I've tried many different solutions. First, I built vanilla ng-repeat thing and tried using ng-infinite-scroll, and then ng-scroll from UI.Utils. That quickly get me to the point where scrolling became painfully slow, and I haven't even had used any crazy stuff like complicated cell templates, ng-ifs or filters. Very soon performance became my biggest pain. When I started adding stuff like resizable columns and custom cell templates, no browser could handle all those bindings anymore.

然后我尝试 NG网，起初我还挺喜欢它 - 易于使用，它有我需要一些不错的功能，但很快我意识到 - NG-网格是可怕的。与错误酿当前版本中，所有参与停下固定的，并切换到下一个版本。而只有上帝知道什么时候，这将是准备使用。 NG-电网原来是pretty甚至比香草纳克重复差很多。

Then I tried ng-grid, and at first I kinda liked it - easy to use, it has a few nice features I needed, but soon I realized - ng-grid is awful. Current version stuffed with bugs, all contributors stopped fixing those and switched to work on a next version. And only God knows when that will be ready to use. ng-grid turned out to be pretty much worse than even vanilla ng-repeat.

我一直试图找到更好的东西。 trNgGrid 看起来很不错，但方式过于简单，没有提供的功能我一直在寻找的开箱。

I kept trying to find something better. trNgGrid looked good, but way too simplistic and doesn't offer features I was looking for out of the box.

NG-表没看从NG-电网太大的不同，也许就真是一样引起了我性能问题。

ng-table didn't look much different from ng-grid, probably it would've caused me same performance issues.

当然，我需要找到一种方式来优化绑定。试过一次绑定， - 不满意，电网仍然laggy。的（UPD：角1.3报价 {{:: foo的}} 一次性绑定语法）的

And of course I needed to find a way to optimize bindings. Tried bind-once - wasn't satisfied, grid was still laggy. (upd: angular 1.3 offers {{::foo}} syntax for one-time binding)

然后我试图作出反应。最初的实验看起来有前途的，但为了建立更复杂的东西我需要学习的细节作出反应，除了那件事感觉还挺非anguleresque，谁知道如何测试具有角+内置的指令作出反应。我所有的努力，建美好自动化测试失败 - 我无法找到一种方法，使反应，PhanthomJS喜欢对方的（这可能是更幻影的问题是有更好的无头的浏览器。）的也作出反应没有按不能解决追加到DOM的问题 - 当你推新元素融入到数据阵列，几毫秒浏览器阻止UI线程。那当然是完全不同类型的问题。

Then I tried React. Initial experiment looked promising, but in order to build something more complicated I need to learn React specifics, besides that thing feels kinda non-anguleresque and who knows how to test directives built with angular+react. All my efforts to build nice automated testing failed - I couldn't find a way to make React and PhanthomJS to like each other (which is probably more Phantom's problem. is there better headless browser) Also React doesn't solve "appending to DOM" problem - when you push new elements into the data array, for a few milliseconds browser blocks the UI thread. That of course is completely different type of problem.

我的同事看到我的挣扎后，（谁的工作对事物的服务器端），抱怨，我认为我已经花了太多，试图解决性能问题。他让我去尝试 SlickGrid ，告诉我这个故事是怎么刻着ZEE最好的网格小部件。老实说，我试了一下，赶紧想烧我的电脑。这件事完全取决于jQuery和一堆jQueryUI的插件，我拒绝突然下降到Web开发的中世纪时代，并失去所有角度的善良。不，谢谢你。

My colleague (who's working on server-side of things) after seeing my struggles, grumbled to me that I already spent too much, trying to solve performance problems. He made me to try SlickGrid, telling me stories how this is freakin zee best grid widget. I honestly tried it, and quickly wanted to burn my computer. That thing completely depends on jQuery and bunch of jQueryUI plugins and I refuse to suddenly drop to medieval times of web-development and lose all angular goodness. No, thank you.

然后我就通过 UX-angularjs-数据网格，我真的，真的，真的很喜欢它。它使用一些聪明的坏蛋算法让事情变得非常敏感。项目是年轻的，但看起来非常有前途。我能够在没有角度禅宗的方式偏离太多，滚动依然流畅建有许多行（我的意思是行数量庞大）的一些基本的网格。不幸的是它不是一个完整的网格小部件的解决方案 - 你不会有调整大小的列和其他东西开箱，文档有所欠缺，等等

Then I came by ux-angularjs-datagrid, and I really, really, really liked it. It uses some smart bad-ass algorithm to keep things very responsive. Project is young, yet looks very promising. I was able to build some basic grid with lots of rows (I mean huge number of rows) without straying too much from the way of angular zen and scrolling still smooth. Unfortunately it's not a complete grid widget solution - you won't have resizable columns and other things out of the box, documentation is somewhat lacking, etc.

此外，我发现这个文章，并且有它，这些百感交集人施加一些非记录黑客以棱角分明，最有可能将那些具有角功能版本的休息时间。

Also I found this article, and had mixed feelings about it, these guys applied a few non-documented hacks to angular and most probably those would breaks with feature versions of angular.

当然至少有几个像Wijmo和剑道UI支付选项。这些都是有棱有角，但是所示的例子是非常简单的分页表，我不知道这是否是值得尝试，即使他们不兼容。我可能最终不得不相同的性能问题。你也不能有选择地只支付为网格控件，你必须购买整套 - 充满了狗屎我可能永远不会使用的。

Of course there are at least couple of paid options like Wijmo and Kendo UI. Those are compatible with angular, however examples shown are quite simple paginated tables and I'm not sure if it is worth even trying them. I might end-up having same performance issues. Also you can't selectively pay just for the grid widget, you have to buy entire suite - full of shit I probably never use.

所以，最后我的问题 - 有好的，保证的，痛苦小的方法有很好的网格无限滚动？有人能指出来很好的例子，项目或Web页面？它是安全使用UX-angularjs-数据网格或更好的使用角度来构建自己的事情，并作出反应？有人曾经尝试过剑道或Wijmo网格？

So, finally to my question - is there good, guaranteed, less painful way to have nice grid with infinite scrolling? Can someone point to good examples, projects or web-pages? Is it safe to use ux-angularjs-datagrid or better to build my own thing using angular and react? Anybody ever tried Kendo or Wijmo grids?

请！不要投票支持关闭这个问题，我知道有很多的计算器上类似的问题，我通过他们几乎每一个人读，但这个问题仍然开放。

Please! Don't vote for closing this question, I know there are a lot of similar questions on stackoverflow, and I read through almost every single one of them, yet the question remains open.

推荐答案

也许问题不在于与现有的小部件，但更与你使用它的方式。
你必须明白，超过2000绑定角消化周期可能花费太长的时间为UI顺利渲染。在同样的想法，你有你的页面上的更多的HTML节点，更多的内存，你会使用，你可能会达到浏览器能比较顺利地呈现这么多的节点。这就是为什么人们用这个跛脚分页的原因之一。

Maybe the problem is not with the existing widgets but more with the way you use it. You have to understand that over 2000 bindings angular digest cycles can take too long for the UI to render smoothly. In the same idea the more html nodes you have on your page, the more memory you will use and you might reach the browser capacity to render so many nodes in a smooth way. This is one of the reason why people use this "lame" pagination.

目前需要实现得到的东西平稳什么到底是限制在页面上显示的数据量。要使其透明，你可以做滚动分页。

At the end what you need to achieve to get something "smooth" is to limit the amount of displayed data on the page. To make it transparent you can do pagination on scroll.

这plunker 说明你的理念，用的智能表。当向下滚动，下一个页面加载（你将不得不向上滚动时执行previous页）。并且在任何时间的最大行量为40

This plunker shows you the idea, with smart-table. When scrolling down, the next page is loaded (you will have to implement the previous page when scrolling up). And at any time the maximum amount of rows is 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);

        }

此函数被调用每当用户向下滚动并达到阈值（当然，油门表现的原因）

This function is called whenever the user scroll down and reach a threshold (with throttle of course for performance reason)

但重要的是，你删除模型中的第一项，如果你已经超过给定的数据量加载更多。

but the important part is where you remove the first entries in the model if you have loaded more than a given amount of data.

这篇关于最佳开源网格流畅，无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！