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

Question

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

这就是为什么我们认为分页表永远行不通，老实说，我认为分页很愚蠢。在分页表上显示动态变化的数据是蹩脚的。假设第 2 页上的一个项目有下一次数据更新可以登陆任何页面。

所以我们需要构建一个具有漂亮无限滚动的网格。不要误会我的意思，我尝试了许多不同的解决方案。首先，我构建了 vanilla ng-repeat 的东西并尝试使用 ng-infinite-scroll ，然后 ng-scroll from UI.Utils .这很快让我发现滚动变得非常缓慢，我什至没有使用任何疯狂的东西，比如复杂的单元格模板，ng-if s 或过滤器。很快，表演成为我最大的痛苦。当我开始添加诸如可调整大小的列和自定义单元格模板之类的内容时，没有浏览器可以处理所有这些绑定(bind)了。

然后我尝试了 ng-grid ，起初我有点喜欢它 - 易于使用，它有一些我需要的不错的功能，但很快我意识到 - ng-grid 很糟糕。当前版本充满了错误，所有贡献者都停止修复这些错误并转而研究下一个版本。只有上帝知道什么时候可以使用。结果证明 ng-grid 甚至比 Vanilla ng-repeat 还要糟糕。

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

ng-table看起来与 ng-grid 没有太大区别，可能它会导致我出现相同的性能问题。

当然，我需要找到一种优化绑定(bind)的方法。试过 bind-once - 不满意，网格仍然滞后。 (更新:angular 1.3 提供 {{::foo}} 一次性绑定(bind)语法)

然后我尝试了 React。最初的实验看起来很有希望，但为了构建更复杂的东西，我需要学习 React 的具体细节，除此之外，这感觉有点非 anguleresque 并且谁知道如何测试使用 angular+react 构建的指令。我为构建良好的自动化测试所做的所有努力都失败了 - 我找不到让 React 和 PhantomJS 相互喜欢的方法(这可能更像是 Phantom 的问题。有没有更好的 headless 浏览器)而且 React 没有解决“附加到 DOM 的问题” "问题 - 当您将新元素推送到数据数组时，浏览器会阻塞 UI 线程几毫秒。那当然是完全不同类型的问题。

我的同事(在服务器端工作)看到我的挣扎后，向我提示说我已经花了太多钱试图解决性能问题。他让我试试SlickGrid ，告诉我这个是如何成为最好的网格小部件的故事。老实说，我试过了，很快就想烧掉我的电脑。那东西完全依赖于 jQuery 和一堆 jQueryUI 插件，我拒绝突然回到 Web 开发的中世纪时代并失去所有 Angular 的优点。不，谢谢。

然后我来了 ux-angularjs-datagrid ，我真的，真的，真的很喜欢它。它使用一些聪明的坏蛋算法来保持响应速度。项目很年轻，但看起来很有前途。我能够构建一些具有很多行(我的意思是大量行)的基本网格，而不会偏离 angular zen 和滚动仍然平滑的方式。不幸的是，它不是一个完整的网格小部件解决方案——你不会有可调整大小的列和其他开箱即用的东西，文档有点缺乏等等。

我也发现了这个 article ，并且对它有复杂的感觉，这些人对 angular 应用了一些未记录的 hack，很可能那些会与 angular 的功能版本中断。

当然，至少有几个付费选项，例如 Wijmo 和 Kendo UI。这些与 angular 兼容，但是显示的示例是非常简单的分页表，我不确定是否值得尝试。我可能最终会遇到相同的性能问题。此外，您不能有选择地只为网格小部件付费，您必须购买整个套件 - 充满了我可能从未使用过的东西。

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

请!不要投票支持关闭这个问题，我知道在 stackoverflow 上有很多类似的问题，我几乎通读了其中的每一个，但问题仍然存在。

Answer 1

也许问题不在于现有的小部件，而在于您使用它的方式。
您必须了解，超过 2000 个绑定(bind)的 Angular 摘要周期可能需要很长时间才能使 UI 平滑呈现。同理，页面上的 html 节点越多，将使用的内存越多，您可能会达到浏览器的容量，以平滑的方式呈现这么多节点。这是人们使用这种“蹩脚”分页的原因之一。

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

This plunker用 smart-table 向您展示这个想法.向下滚动时，加载下一页(向上滚动时必须实现上一页)。并且任何时候的最大行数都是 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);

        }

每当用户向下滚动并达到阈值时都会调用此函数(出于性能原因当然会使用 throttle )

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