AngularJS - 数据表的最佳实践

时间:2016-01-25 08:36:57

标签: angularjs

我有一个包含300行(有限),20列的表。 - 使用Ag-Grid

此表还有8个过滤器,每个过滤器平均为50行。 - 使用isteven多选

这个模块非常慢,Batarang显示的范围是7000到20000 $$观察者。该模块也是系统中最重要的模块。

我将过滤器更改为根据需要动态加载,但仍然非常慢。 (在Chrome上,具有8核i7和16GB RAM)

显示海量数据的表格的最佳做法是什么?

3 个答案:

答案 0 :(得分:3)

您可以使用一次性数据绑定。在视图中使用{{::myVal}}代替{{myVal}},它应该减少观察者的数量。

<强> More

您可以执行延迟渲染或虚拟重复以减少必须创建的DOM节点数。 (这可能是你的app瓶颈)

<强> More

最后,您可以使用自己的角度编译方法实现,并使用$eval使用$scope变量编译自己的模板,但不将其添加到角度应用范围。它可以比角度解决方案快得多,因为您可以避免所有检查并为您的应用程序优化它并将其渲染为纯HTML,而不会使所有角度魔法更快。

答案 1 :(得分:2)

我建议您查看使用虚拟化的网格,例如ui-grid,您可以找到包含大型数据集的示例here

答案 2 :(得分:0)

您可以使用React。 React的表现要好得多。 React是V中的MVC,因此您可以使用React + AngularJS。

您也可以尝试使用此AngularJS库 - angular-datatables