Best options for an AngularJS Tree Grid

问题

For a while now, I've been looking for a Tree Grid that works nicely with AngularJS and haven't had a lot of luck.

My requirements are:

Easy to use
Looks good
Supports drag and drop
Can handle large amount of data 10000+ (i.e pagination/lazy scroll of 10,000+ rows)
Can show hierarchical data in a table (i.e columns/sorting)
Free/Cheap

Projects that come close:

Sencha Tree Grid
- Doesn't appear to play nicely with AngularJS
- Apparently a Buffered-Tree module can help handle 1000s or rows
angular-ui-tree
- Close but doesn't support table functions like columns, out of the box
- Doesn't handle large data, but Michael Bromley's dirPaginate directive can fix this
tree-grid-directive
- Looks good (Fits with bootstrap)
- Has columns
- But doesn't easily allow for pagination/lazy loading

Ok... so given that other people must have solved this before, my question is:

What is the best way to approach this?

Is there a project out there already that covers all the bases? Or perhaps there is a simple way to adapt one of these to be a lazily-loaded tree grid...

回答1:

My Suggestion would be Angular UI-Grid. In its current version, there are many configuration options, also for Trees:

Website: http://ui-grid.info/

Expandable Grid: http://ui-grid.info/docs/#/tutorial/216_expandable_grid

回答2:

I know its a two months old question, but I needed the same thing and just came across this grid Adapt-Strap.

I used it some small examples and worked fine so far, seems really easy to use, has drag-drop/pagination/lazy loading.

I think its worth a try, and fyi: I have no connection what so ever with the developers there.

回答3:

IgniteUI Tree Grid (not to be confused with the ugly Hierarchical Grid)

Whilst not perfect, this seems like a reasonable option.

Pros

Looks nice enough
Has a few plugins for sorting, filtering, paging, pinning etc.
Lazy loading of children can be integrated by listening to expand events (and possibly the InfragisticsLoader)

Cons

No out-of-the-box AngularJS integration
No "Infinite Scroll" out-of-the-box

Its also pretty simple to use:

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

I have created a sample jsFiddle here: http://jsfiddle.net/immersion/qggbs0s6/

回答4:

Use JS Tree

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

Lazy Load in JSTree :http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

回答5:

Angular Tree Grid seems like a nice option if you want to be able to edit nodes.

As of version 2.7, it does not support drag & drop reordering, sadly.

Demo: https://angular-tree-grid.stackblitz.io/add_edit_delete

来源：https://stackoverflow.com/questions/27241548/best-options-for-an-angularjs-tree-grid

标签

angularjs

gridview

treeview

lazy-loading