AngularJS树网格的最佳选项

Dyl*_*son 20 treeview gridview lazy-loading angularjs

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

我的要求是:

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

接近的项目:

  • Sencha树网格
    • 似乎没有与AngularJS很好地配合
    • 显然,Buffered-Tree模块可以帮助处理1000或行
  • 角-UI-树
    • 关闭但不支持表格功能,如列,开箱即用
    • 不处理大数据,但Michael Bromley的dirPaginate指令可以解决这个问题
  • 树并网指令
    • 看起来不错(适合引导)
    • 有列
    • 但是不容易允许分页/延迟加载

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

解决这个问题的最佳方法是什么?

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

Dyl*_*son 5

IgniteUI树网格(不要与丑陋的分层网格混淆)

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

优点

  • 看起来不错
  • 有一些插件可用于排序,过滤,分页,固定等.
  • 通过监听扩展事件(可能还有InfragisticsLoader)可以集成延迟加载的子项

缺点

  • 没有开箱即用的AngularJS集成
  • 没有"无限滚动"开箱即用

它也很简单易用:

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

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


小智 5

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

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

我认为它值得一试,而且fyi:我与那里的开发者没有任何联系.


小智 4

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

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

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