Najlepsze opcje dla siatki drzewa AngularJS

Question

Od jakiegoś czasu szukam drzewa Grid, które dobrze współpracuje z AngularJS i nie miałem dużo szczęścia.

Moje wymagania to:

1. Łatwy w użyciu
2. Wygląda dobrze
3. Obsługuje przeciągnij i upuść
4. Może obsłużyć dużą ilość danych 10000+ (tj paginacja/leniwy zwój 10000 wierszy)
5. Może wyświetlać dane hierarchiczne w tabeli (np. Kolumny/sortowanie)
6. Bezpłatne/tanie

Projekty, które przychodzą w pobliżu:

• Sencha Tree Grid
  • nie wydaje się grać ładnie z angularjs
  • Podobno moduł Buffered-Tree może pomóc poradzić 1000S lub wiersze
• angular-ui-tree
  • Blisko, ale nie obsługuje funkcji jak kolumny tabeli, po wyjęciu z pudełka
  • nie obsługuje dużych ilości danych, ale dyrektywa dirPaginate Michaela Bromley może naprawić
• tree-grid-directive
  • Wygląda dobrze (Pasuje bootstrap)
  • Has kolumny
  • Ale nie łatwo pozwalają na stronicowania/leniwy załadunku

Ok ... więc biorąc pod uwagę, że inni ludzie muszą rozwiązać tego wcześniej, moje pytanie brzmi:

Jaki jest najlepszy sposób, aby podejść do tego?

Czy istnieje już projekt obejmujący wszystkie podstawy? A może istnieje prosty sposób dostosować jeden z nich się leniwie ładowane drzewo siatki ...

Answer 1

Moją sugestią byłaby Angular UI-Grid. W obecnej wersji, istnieje wiele opcji konfiguracyjnych, a także dla drzew:

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

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

Answer 2

Zastosowanie JS Drzewo

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

Lazy Załaduj JSTree: http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

Answer 3

IgniteUI Tree Grid (nie mylić z brzydkim Hierarchical Grid)

Chociaż nie jest doskonały, wydaje się to rozsądną opcją.

Plusy

• Wygląda na tyle miły
• posiada kilka wtyczek do sortowania, filtrowania, przywoławcze, przypinanie itp
• Lazy loading dzieci mogą być zintegrowane poprzez słuchanie poszerzyć wydarzeń (i ewentualnie z InfragisticsLoader)

Wady

• Nie out-of-the-box integracji angularjs
• Nie "Nieskończona Scroll" out-of-the-box

Jest również bardzo prosty w obsłudze:

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

Stworzyłem próbkę jsFiddle tutaj: http://jsfiddle.net/immersion/qggbs0s6/

Answer 4

Znam jej dwumiesięczne pytanie, ale potrzebowałem tego samego i właśnie natknąłem się na tę siatkę Adapt-Strap.

Użyłem go kilka małych przykładów i działało dobrze do tej pory, wydaje się bardzo łatwy w użyciu, ma drag-drop/pagination/lazy loading.

Myślę, że warto spróbować, a fyi: Nie mam żadnego związku z deweloperami.

Answer 5

Istnieje native TreeGrid directive zbudowany w całości przy użyciu AngularJS. Jest częścią IntegralUI Studio for Web, zbudowanego przez Lidor Systems.

Jest łatwy w obsłudze i umożliwia obsługę dużych zbiorów danych, bez stronicowania.