AngularJS树网格的最佳选项

Question

一段时间以来，我一直在寻找一个与AngularJS很好地结合并且运气不高的Tree Grid。

我的要求是：

1. 易于使用
2. 看起来不错
3. 支持拖放
4. 可以处理10000+以上的大量数据（即分页/ 10,000 +行的惰性滚动）
5. 可以在表中显示层次结构数据（即列/排序）
6. 免费/便宜

即将结束的项目：

• Sencha Tree Grid
  • [似乎在AngularJS上不能很好玩
  • 显然，缓冲树模块可以帮助处理1000或几行
• angular-ui-tree
  • 关闭，但不支持表格功能，例如列，开箱即用
  • 不处理大数据，但是Michael Bromley的dirPaginate指令可以解决此问题
• tree-grid-directive
  • 看起来不错（适合自举）
  • 具有列
  • 但是不容易允许分页/延迟加载

好...鉴于其他人必须已经解决了这个问题，我的问题是：

什么是最好的方法？

是否已经有一个涵盖所有基地的项目？也许有一种简单的方法可以使其中之一成为延迟加载的树形网格...

Answer 1

我的建议是Angular UI-Grid。在当前版本中，有许多配置选项，也适用于“树”：

网站：http://ui-grid.info/

可扩展网格：http://ui-grid.info/docs/#/tutorial/216_expandable_grid

Answer 2

我知道这是一个两个月大的问题，但是我需要同样的东西，只是碰到了这个网格Adapt-Strap。

我使用了一些小示例，到目前为止效果很好，似乎真的很容易使用，具有拖放/分页/延迟加载功能。

我认为值得一试，仅供参考：我与那里的开发人员之间没有任何联系。

Answer 3

IgniteUI Tree Grid（不要与丑陋的Hierarchical Grid混淆]

虽然不完美，但这似乎是一个合理的选择。

Pros

• 看起来不错
• 具有一些用于排序，过滤，分页，固定等的插件
• 可以通过侦听扩展事件（可能还有InfragisticsLoader）来集成子级的延迟加载

缺点

• 无现成的AngularJS集成
• 没有开箱即用的“无限滚动”

使用起来也很简单：

$("#treegrid").igTreeGrid({
    width: "100%",
    dataSource: data,
    primaryKey: "employeeID",
    columns: [
        { headerText: "Employee ID", key: "employeeID", dataType: "number" },
        { headerText: "Name", key: "name", dataType: "string" }
    ]
});

我在这里创建了一个示例jsFiddle：http://jsfiddle.net/immersion/qggbs0s6/

Answer 4

使用JS树

http://ezraroi.github.io/ngJsTree/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation

JSTree中的延迟加载：http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

Answer 5

Angular Tree Grid似乎是一个不错的选择，如果您还希望能够编辑节点。

演示：https://angular-tree-grid.stackblitz.io/add_edit_delete