angularjs - switch - ng-href angular 4

Las mejores opciones para una cuadrícula de árbol AngularJS

Question

Desde hace un tiempo, he estado buscando un Tree Grid que funcione bien con AngularJS y no haya tenido mucha suerte.

Mis requisitos son:

1. Fácil de usar
2. Se ve bien
3. Admite arrastrar y soltar
4. Puede manejar una gran cantidad de datos 10000+ (es decir, paginación / desplazamiento lento de más de 10.000 filas)
5. Puede mostrar datos jerárquicos en una tabla (es decir, columnas / clasificación)
6. Gratis / Barato

Proyectos que se acercan:

• Rejilla del árbol Sencha
  • No parece jugar muy bien con AngularJS
  • Aparentemente, un módulo de árbol amortiguado puede ayudar a manejar miles o filas
• angular-ui-tree
  • Cierre pero no admite funciones de tabla como columnas, fuera de la caja
  • No maneja grandes cantidades de datos, pero la directiva dirPaginate de Michael Bromley puede solucionar esto
• directiva de rejilla de árbol
  • Se ve bien (se ajusta con bootstrap)
  • Tiene columnas
  • Pero no permite fácilmente la paginación / carga lenta

Ok ... entonces dado que otras personas deben haber resuelto esto antes, mi pregunta es:

¿Cuál es la mejor manera de abordar esto?

¿Ya hay un proyecto que cubra todas las bases? O tal vez hay una forma simple de adaptar uno de estos para ser una cuadrícula de árbol cargada de forma perezosa ...

Answer 1

IgniteUI Tree Grid (no debe confundirse con la fea rejilla jerárquica )

Aunque no es perfecto, parece una opción razonable.

Pros

• Se ve lo suficientemente agradable
• Tiene algunos complementos para clasificar, filtrar, paginar, fijar, etc.
• La carga diferida de los niños se puede integrar escuchando eventos expandidos (y posiblemente el InfragisticsLoader )

Contras

• Sin integración inmediata de AngularJS
• Sin "Desplazamiento infinito" fuera de la caja

También es bastante simple de usar:

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

He creado una muestra jsFiddle aquí: http://jsfiddle.net/immersion/qggbs0s6/

Answer 2

Utilice JS Tree

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

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

Answer 3

Sé que es una pregunta de hace dos meses, pero necesitaba lo mismo y me encontré con esta cuadrícula Adapt-Strap .

Utilicé algunos ejemplos pequeños y funcionó bien hasta el momento, parece realmente fácil de usar, tiene carga por arrastrar / soltar / paginación / floja.

Creo que vale la pena intentarlo, y fyi: no tengo conexión alguna con los desarrolladores de allí.

Answer 4

Existe una directiva TreeGrid nativa construida completamente con AngularJS. Es parte de IntegralUI Studio for Web, construido por Lidor Systems.

Es fácil de usar y le permite operar con grandes conjuntos de datos, sin paginación.

Answer 5

Mi sugerencia sería Angular UI-Grid. En su versión actual, hay muchas opciones de configuración, también para Árboles:

Sitio web: http://ui-grid.info/

Cuadrícula expansible: http://ui-grid.info/docs/#/tutorial/216_expandable_grid