AngularJS树网格的最佳选项

Question

有一段时间了，我一直在寻找一个与AngularJS很好地配合使用的Tree Grid，并且没有多少运气。

我的要求是：

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

接近的项目：

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

好的......所以考虑到其他人之前必须解决这个问题，我的问题是：

解决此问题的最佳方式是什么？

那里是否有一个涵盖所有基地的项目？ 或者也许有一种简单的方法可以使其中一种变成一个延迟加载的树格...

Answer 1

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

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

<强>赞成

• 看起来不错
• 有一些用于排序，过滤，分页，固定等的插件。
• 通过收听扩展事件（可能还有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 2

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

我使用了一些小例子，到目前为止工作得很好，看起来很容易使用，有拖放/分页/延迟加载。

我认为值得一试，而且我认为与开发商没有任何联系。

Answer 3

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

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

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

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似乎是一个不错的选择。

不幸的是，从2.7版开始，它不支持拖放重新排序。

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