表设计用于呈现大量数据Angular

时间：2018-01-02 15:38:53

标签： angular

我是角色的新手，期待创建一个能够渲染大量数据的表格。以下是我正在努力实现的表格中的功能。有人可以指导如何处理这个问题吗？有没有实现它的开源项目？或者是好的资源

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

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

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

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

  5. 分页以及在一页中选择结果数量的选项

  6. 编辑和删除每行的操作

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

    8. 谢谢！

3 个答案:

答案 0 :(得分：1)

如果您正在寻找能够完成大部分（如果不是全部）事情的组件，那么它绝对值得检查ag-grid - 尽管有些功能，例如： master / detail，仅限企业许可证：

https://www.ag-grid.com/example.php

答案 1 :(得分：1)

如果您可以给this一点时间，您几乎可以满足所有要求。该组件可高度自定义。功能包括

  
      
  • 处理大型数据集（Virtual DOM）
    •   
  • 富有表现力的标题和单元格模板
    •   
  • 横向＆amp;垂直滚动
    •   
  • 列重新排序＆amp;调整大小
    •   
  • 客户端/服务器端分页＆amp;排序
    •   
  • 智能列宽算法（强制填充和弹性增长）
    •   
  • 综合寻呼机
    •   
  • Cell＆amp;行选择（单，多，键盘，复选框）
    •   
  • 固定和流体高度
    •   
  • 左右列固定
    •   
  • 行明细视图
    •   
  • 将主题与已包含的Google素材主题分开
    •   
  • 轻型代码库/无外部依赖
    •   
  • AoT编译支持
    •   
  • 通用支持
    •   

This也类似于您的要求，如果您没有时间自定义，可以直接使用。

答案 2 :(得分：0)

由于我发现了ng2-admin（http://akveo.com/ng2-admin/#/pages/dashboard）的Angular2模板，我一直在使用他们的表来自另一个名为ng2-smart-table的仓库（{{3 }}）。

我觉得这很有效率，即使它需要一些工作才能真正实用。

我一直把这个表放在一个半大数据环境中，我只用了一些问题就达到了很好的响应时间，所以如果你正确地做事，很多数据都没有问题

  1. 过滤和常规搜索：演示中已有一个有效的示例：https://github.com/akveo/ng2-smart-table。
  2. 用户隐藏/显示列：它需要一些编码，但很容易实现。
  3. 下拉过滤器和选项：在同一链接上提供示例https://akveo.github.io/ng2-smart-table/#/examples/using-filters，在底部关于＆＃34; Checkbox，Select和Completer过滤器类型＆＃34;）
  4. 排序：可用且可自定义。 （https://akveo.github.io/ng2-smart-table/#/examples/using-filters）
  5. 分页：可用且可自定义。 （https://akveo.github.io/ng2-smart-table/#/documentation）
  6. 对行的操作：可用且可使用角度组件轻松自定义（https://akveo.github.io/ng2-smart-table/#/documentation）。
  7. 可展开的行：我还没有这样做，但我知道它可行，因为我看到其他人用这张表做了。根据我的记忆，它为每个细节行使用另一个智能表完成，但这只是假设。

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

    NB ：如果你真的是Angular的新手，请注意正确理解概念和如何做事，因为管理表是你可以做的最难的工作之一＆＃ 39;很容易创建一些不是真正有效的东西，特别是如果你处理大量的数据。

相关问题
最新问题