Лучшие варианты для сетки деревьев AngularJS

Некоторое время я искал Tree Grid, который отлично работает с AngularJS и не имел большой удачи.

Мои требования:

  • Простота использования
  • Выглядит хорошо.
  • Поддержка перетаскивания
  • Может обрабатывать большое количество данных 10000+ (например, разбиение на страницы/ленивый свиток из 10 000 строк)
  • Может отображать иерархические данные в таблице (например, столбцы/сортировка)
  • Free/Дешевые

Ближайшие проекты:

  • Сетка дерева Сенча
    • Кажется, не выглядит красиво с AngularJS
    • По-видимому, модуль Buffered-Tree может обрабатывать 1000 или строк
  • angular-ui-tree
    • Закрыть, но не поддерживает функции таблицы, такие как столбцы, из коробки
    • Не обрабатывает большие данные, но директива dirPaginate Майкла Бромли может исправить это.
  • tree-grid-directive
    • Выглядит хорошо (подходит с бутстрапом)
    • Имеет столбцы
    • Но нелегко разрешить разбиение на страницы/ленивую загрузку.

Хорошо... так, что другие люди, должно быть, решили это раньше, мой вопрос:

Каков наилучший способ приблизиться к этому?

Есть ли там проект, который охватывает все базы? Или, может быть, есть простой способ адаптировать одну из них к лениво загруженной сетке деревьев...

Ответы

Ответ 1

IgniteUI Tree 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/

Ответ 2

Я знаю его двухмесячный вопрос, но мне нужно было то же самое и просто наткнулся на эту сетку Adapt-Strap.

Я использовал его несколько небольших примеров и отлично работал до сих пор, кажется очень простым в использовании, имеет перетаскивание/разбиение на страницы/ленивую загрузку.

Я думаю, что стоит попробовать, и fyi: у меня нет связи с тем, что когда-либо было с разработчиками.

Ответ 3

Существует встроенная директива TreeGrid, построенная полностью с помощью функции AngularJS. Это часть IntegralUI Studio for Web, созданная Lidor Systems.

Он прост в использовании и позволяет работать с огромными наборами данных без разбивки на страницы.