angular - 表格设计以呈现大量数据 Angular

Question

我是 Angular 的新手，期待创建一个可以呈现大量数据的表格。下面是我要实现的表中的功能。有人可以指导如何处理这个问题吗？有没有实现它的开源项目？或者好的资源

1. 用于在所有列中搜索并在表格中显示结果的通用搜索按钮

2. 用户可以显示和隐藏某些列

3. 在选择性列上预填充过滤下拉列表。可以在一列中选择多个选项(如在谷歌电子表格中)

4. 对选择性/所有列进行排序(一次按单个字段排序)

5. 分页，可选择一页中的结果数

6. 对每一行进行编辑和删除操作

7. 可扩展行以显示更多元数据

谢谢!

Answer 1

自从我发现了 ng2-admin ( http://akveo.com/ng2-admin/#/pages/dashboard ) 的 Angular2 模板后，我一直在使用他们的表格，该表格来自另一个名为 ng2-smart-table ( https://github.com/akveo/ng2-smart-table ) 的仓库。

我发现这是非常有效的，尽管它需要一些工作才能真正实用。

我一直将此表置于半大数据环境中，总体上我获得了良好的响应时间，只有几个问题，所以如果你做事正确，大量数据真的没有问题。

1. 过滤和一般搜索:演示中已经有一个工作示例:https://akveo.github.io/ng2-smart-table/#/examples/using-filters .
2. 用户隐藏/显示列:需要一些编码，但很容易实现。
3. 下拉过滤器和选项:可作为同一链接的示例(https://akveo.github.io/ng2-smart-table/#/examples/using-filters，在关于“复选框、选择和完成过滤器类型”的底部部分)。
4. 排序:可用且可定制。 ( https://akveo.github.io/ng2-smart-table/#/documentation )
5. 分页:可用且可定制。 ( https://akveo.github.io/ng2-smart-table/#/documentation )
6. 对行的操作:可使用 Angular 组件 (https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers) 轻松定制。
7. 可扩展行:我个人没有做过，但我知道这是可行的，因为我看到其他人用这张 table 做过。据我所知，它是为每个详细信息行使用另一个智能表完成的，但这只是假设。

我会推荐这个，因为它非常原始(而且文档并不完美)，这意味着可以轻松定制以满足您的需求。我已经使用这个库将近一年了，我有几种非常易于设置和使用的通用智能表组件。

---

N.B:如果您真的是 Angular 的新手，请注意正确理解概念以及如何做事，因为管理表是您可以做的最困难的工作之一，因为它非常很容易创建一些既不实用也不高效的东西，尤其是当您处理大量数据时。