javascript - 使用angularjs隐藏表列的最有效方法

Question

我想知道是否有人知道在由 angularjs 提供支持的表格中显示/隐藏列的更有效方法:

我有一个大表(20 多列，1000000 多行)并实现了一项功能以根据用户偏好显示/隐藏列。我在每个表格单元格上通过 ng-if 执行此操作。这会在表的初始加载时触发大量观察者计数，并且 Angular 摘要循环变得疯狂，单个页面上有超过 4000 个观察者。

我解决性能问题的主要想法是减少观察者数量。为此，我使用 this什么都不做的库然后禁用不在视口(viewport)中的观察者。到目前为止一直很好，性能变得更好了，但是如果我向表中添加越来越多的功能会怎样呢？看起来这个显示/隐藏列功能将永远成为我的性能瓶颈(根据 chrome angularJS 摘要计时分析，它是)。

结论:ng-if 看起来不是显示/隐藏列的好方法，因为观察者数量多且性能不佳。有人知道显示/隐藏列的更智能解决方案吗？

编辑:我已经有了每页 200 行的分页，但问题仍然存在，当然我的目标是可扩展的解决方案。

Answer 1

您可以尝试将 CSS 类应用于所有表格单元格和具有不同类名称的相应标题单元格。

EG:第 1 列、第 2 列等

在 Angular 字符串中定义类定义并将样式标记作为表达式放在中间

例如:

在 Controller 中 js

$scope.columnStyleDefs = '.column-1{display:none},.column-1{display:table-cell},...';

当用户更改他们的偏好时，您可以根据需要更改“columnStyleDefs”

在html模板中

<style>
{{columnStyleDefs}}
</style>

我认为这可能对您完成上述作业有所帮助。