具有平滑、无限滚动功能的最佳开源网格

当我开始从事当前的项目时，我接到了一项相当艰巨的任务 - 构建一些本质上可以取代人们在公司内部使用的大型电子表格的东西。

这就是为什么我们认为分页表永远不会起作用，而且老实说，我认为分页是愚蠢的。在分页表上显示动态变化的数据是蹩脚的。假设第 2 页上的某个项目在下次数据更新时可以登陆到任何页面上。

所以我们需要构建一个具有良好无限滚动的网格。不要误会我的意思，我尝试了很多不同的解决方案。首先，我构建了 vanilla ng-repeat 并尝试使用ng-无限滚动 http://binarymuse.github.io/ngInfiniteScroll， 进而来自 UI.Utils 的 ng-scroll http://angular-ui.github.io/ui-utils/。这很快让我的滚动速度变得非常慢，而且我什至没有使用过任何疯狂的东西，比如复杂的单元格模板，ng-ifs 或过滤器。很快，性能就成了我最大的痛苦。当我开始添加可调整大小的列和自定义单元格模板等内容时，没有浏览器可以再处理所有这些绑定。

然后我尝试了ng-grid http://angular-ui.github.io/ng-grid/，一开始我有点喜欢它 - 易于使用，它有一些我需要的不错的功能，但很快我意识到 - ng-grid 很糟糕。当前版本充满了错误，所有贡献者都停止修复这些错误并转而开发下一个版本。只有上帝知道什么时候可以使用。事实证明，ng-grid 比普通的 ng-repeat 还要糟糕得多。

我一直在努力寻找更好的东西。trNgGrid http://moonstorm.github.io/trNgGrid/release/看起来不错，但太简单了，没有提供我正在寻找的开箱即用的功能。

ng-table http://bazalt-cms.com/ng-table/看起来与 ng-grid 没有太大不同，可能它会给我带来同样的性能问题。

当然，我需要找到一种优化绑定的方法。尝试过绑定一次 https://github.com/Pasvaz/bindonce- 不满意，网格仍然滞后。（更新：Angular 1.3 提供{{::foo}}一次性绑定的语法）

然后我尝试了 React。最初的实验看起来很有希望，但为了构建更复杂的东西，我需要学习 React 的细节，除此之外，感觉有点非角度风格，谁知道如何测试用 Angular+React 构建的指令。我构建良好的自动化测试的所有努力都失败了 - 我找不到一种方法让 React 和 PhanthomJS 互相喜欢（这可能更多是 Phantom 的问题。是否有更好的无头浏览器）此外，React 并没有解决“附加到 DOM”问题 - 当您将新元素推入数据数组时，浏览器会阻塞 UI 线程几毫秒。这当然是完全不同类型的问题。

我的同事（正在研究服务器端的事情）在看到我的挣扎后，向我抱怨说我已经花了太多钱来试图解决性能问题。他让我尝试光滑网格 https://github.com/mleibman/SlickGrid，告诉我这是如何成为最好的网格小部件的故事。我老老实实地尝试了一下，很快就想烧掉我的电脑。那件事完全取决于 jQuery 和一堆 jQueryUI 插件，我拒绝突然陷入 Web 开发的中世纪时代并失去所有角度的优点。不，谢谢。

然后我就过来了ux-angularjs-数据网格 https://github.com/webux/ux-angularjs-datagrid，我真的真的真的很喜欢它。它使用一些聪明的坏蛋算法来保持反应灵敏。项目还很年轻，但看起来很有前途。我能够构建一些具有大量行（我的意思是大量行）的基本网格，而不会偏离角度禅宗的方式太多，并且滚动仍然平滑。不幸的是，它不是一个完整的网格小部件解决方案 - 您不会有可调整大小的列和其他开箱即用的东西，文档有些缺乏等等。

我还发现了这个article http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/，并且对此有着复杂的感觉，这些人对 Angular 应用了一些未记录的黑客攻击，并且很可能这些攻击会破坏 Angular 的功能版本。

当然，至少有一些付费选项，例如 Wijmo 和 Kendo UI。这些与角度兼容，但是显示的示例是非常简单的分页表，我不确定是否值得尝试它们。我最终可能会遇到同样的性能问题。而且你不能选择性地只为网格小部件付费，你必须购买整个套件 - 充满了我可能永远不会使用的狗屎。

所以，最后我的问题是——有没有好的、有保证的、不那么痛苦的方法来拥有无限滚动的漂亮网格？有人可以指出一些好的例子、项目或网页吗？使用 ux-angularjs-datagrid 是否安全，或者使用 Angular 和 React 构建我自己的东西是否更好？有人尝试过 Kendo 或 Wijmo 网格吗？

请！不要投票支持结束这个问题，我知道 stackoverflow 上有很多类似的问题，我几乎阅读了其中的每一个问题，但问题仍然悬而未决。

也许问题不在于现有的小部件，而更多在于您使用它的方式。 您必须了解，超过 2000 个绑定角度摘要循环可能需要很长时间才能使 UI 顺利渲染。同样的想法，页面上的 html 节点越多，您将使用的内存就越多，并且您可能会达到浏览器的容量来平滑地渲染如此多的节点。这就是人们使用这种“蹩脚”分页的原因之一。

最后，要获得“平滑”效果，您需要实现的目标是限制页面上显示的数据量。为了使其透明，您可以在滚动上进行分页。

这个笨蛋 http://plnkr.co/edit/Qq2yfC?p=preview向您展示这个想法智能表 http://lorenzofox3.github.io/smart-table-website/。向下滚动时，将加载下一页（向上滚动时必须实现上一页）。并且任何时候最大行数都是 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);

        }

每当用户向下滚动并达到阈值时就会调用此函数（出于性能原因当然需要节流）

但重要的是，如果加载的数据超过给定数量，则删除模型中的第一个条目。