Angular TreeGrid - Potente Componente Lista en Árbol
- Cargue grandes cantidades de datos cargando dinámicamente datos secundarios bajo demanda.
- Incluye interacciones de UI como expandir y contraer registros padre, edición en diálogo y más.
- Cree una apariencia de IU atractiva con temas integrados como Fabric, Bootstrap, etc.
Quick Overview Video
Trusted by the world’s leading companies
Visión general
El Angular TreeGrid es un control rico en funciones utilizado para visualizar eficazmente datos jerárquicos y autorreferenciales en un formato tabular (una estructura tipo árbol). Su rico conjunto de características incluye muchas funcionalidades: unión de datos, virtualización, edición, ordenación, búsqueda, filtrado, desplazamiento infinito, paginación, filas y columnas congeladas, exportación a múltiples formatos, agregación de filas y más.
¿Por qué elegir el Syncfusion® Angular TreeGrid?
Alto rendimiento
Muestre datos jerárquicamente. El diseño optimizado del componente proporciona un alto rendimiento para cargar millones de registros en solo unos segundos.
Vinculación de datos fluida
Vincule datos sin problemas con diversas fuentes de datos locales y remotas, como JSON, OData, WCF y servicios web RESTful con la ayuda de un administrador de datos.
Cuadrícula jerárquica autorreferencial
El Angular TreeGrid fue diseñado para visualizar datos autorreferenciales y jerárquicos en un formato tabular. Muestra la relación entre los registros principales y secundarios.
Edición flexible
El Angular TreeGrid realiza operaciones de creación, lectura, actualización y eliminación (CRUD) con datos observables. Edita con una matriz de JSON o un servicio de datos remoto con el administrador de datos.
Se adapta a cualquier resolución
El TreeGrid tiene un diseño altamente receptivo y un diseño optimizado para computadoras de escritorio, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows OS.
Cree sus propios diseños de plantilla
Mediante el uso de plantillas, los usuarios pueden crear una interfaz de usuario personalizada en el Angular TreeGrid utilizando una amplia gama de opciones de plantilla.
Temas personalizables atractivos
Diseño de vanguardia con temas integrados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utilice la herramienta en línea Theme Studio para personalizar fácilmente los temas de Angular TreeGrid.
Globalización y localización
Los usuarios de diferentes localidades pueden usar el TreeGrid formateando fechas, moneda y numeración para adaptarse a sus preferencias.
Ejemplo de código de Angular TreeGrid
Comience fácilmente con el Angular TreeGrid (Tabla de árbol) utilizando unas pocas líneas simples de código HTML y TS, como se demuestra a continuación. Explore también este ejemplo de Angular TreeGrid, que le muestra cómo representar y configurar un TreeGrid en Angular.
<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='350' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90><e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
selector: 'ej2-treegrid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = sampleData;
}
}Indicador de carga de esqueleto
El TreeGrid muestra un efecto como indicador de carga mientras recupera datos y los vincula a la cuadrícula de árbol durante la representación inicial, la actualización o después de realizar acciones de cuadrícula como la ordenación. El TreeGrid ofrece dos tipos de efectos: spinner y shimmer.
Columnas
Las columnas definen el esquema de una fuente de datos en el Angular TreeGrid. Las características incluyen formato, definiciones de columna, ajuste de texto, selector de columnas, menú de columnas y reordenación de columnas.
Paginación
A través de la paginación, se puede ver un segmento de datos de la fuente de datos asignada. El Angular TreeGrid tiene una interfaz de usuario de paginación integrada con opciones para personalizar toda su interfaz. También tiene un modo de paginación bajo demanda para la recuperación eficaz de datos de servicios web remotos.
Ordenación
El Angular TreeGrid permite a los usuarios ordenar una columna simplemente haciendo clic en el encabezado. Un Ctrl + clic en el encabezado realiza una ordenación múltiple. Ordene los datos en orden ascendente o descendente.
Filtrado
El filtrado ayuda a ver registros específicos o relacionados que cumplen con ciertos criterios de filtrado. El componente admite varios tipos de filtros que incluyen potentes filtros tipo Excel. Los filtros de Angular TreeGrid permiten a los usuarios elegir tipos de filtros adecuados, definir su propia lógica de filtrado personalizada y personalizar la interfaz de filtrado según las necesidades de su aplicación. Se puede definir el filtrado con registros principales o secundarios relacionados.
Selección
Angular TreeGrid permite seleccione filas o celdas. También se pueden seleccionar una o más filas o celdas manteniendo presionado Ctrl o Command, o programáticamente.
Edición
El Angular TreeGrid proporciona soporte completo para las operaciones de creación, lectura, actualización y eliminación (CRUD). Además de los componentes de edición integrados para editar el valor de una columna en particular, mediante el soporte de plantillas, los usuarios pueden crear componentes de edición personalizados. El TreeGrid realiza operaciones de edición con una colección JSON o un servicio de datos remoto con la ayuda de un administrador de datos.
Arrastrar y soltar filas
El Angular TreeGrid permite a los usuarios arrastrar y soltar filas dentro de la misma u otra cuadrícula de árbol. Esta funcionalidad es especialmente útil para reorganizar datos y crear una experiencia de usuario más intuitiva.
Agregación
Los agregados para valores de columna se pueden mostrar fácilmente utilizando la función de agregado. Los agregados se pueden personalizar para mostrar su valor en cada jerarquía con un conjunto de tipos de resumen predefinidos.
Columnas congeladas
Las columnas congeladas son visibles a la izquierda, a la derecha o a ambos lados del Angular TreeGrid y hacen que el contenido restante de la cuadrícula sea desplazable. Se utilizan principalmente para comparar valores de celdas.
Búsqueda
Puede buscar los registros utilizando el método de búsqueda. Integre un cuadro de texto de búsqueda en la barra de herramientas del Angular TreeGrid agregar elementos de búsqueda.
Información sobre herramientas personalizada
El componente Angular TreeGrid le permite establecer información sobre herramientas para las celdas de la cuadrícula de árbol. Desplace el cursor sobre los nodos del árbol para mostrar el texto de la información sobre herramientas.
Encabezados fijos
Mantenga los encabezados de las columnas siempre visibles mientras se desplaza por los datos. El encabezado fijo proporciona un contexto constante, lo que facilita la interpretación y el análisis de grandes conjuntos de datos.
Exportación
Exportación a Excel, PDF, CSV
Exporte fácilmente el control Tree Grid HTML5 en formatos de archivo Excel, PDF o CSV. Los usuarios también pueden personalizar programáticamente el documento exportado.
Imprimir
Los usuarios pueden imprimir datos ya sea utilizando la opción de imprimir de la barra de herramientas o de forma programada. Imprima todas las filas de un Angular TreeGrid independientemente del número de páginas o imprima solo la página visualizada actualmente.
Características adicionales
Altura de fila
La altura de la fila es un factor importante al mostrar registros en la ventana de visualización, y es ajustable según el requisito de la interfaz de usuario de la aplicación. También es posible establecer alturas de fila de forma condicional.
Copiar al portapapeles
El portapapeles proporciona una opción para copiar los datos de las filas o celdas seleccionadas al portapapeles. Utilice las combinaciones de teclas Ctrl+C y Ctrl+Shift+H para copiar datos con y sin encabezados, respectivamente.
Menú contextual
El menú contextual mejora la interacción del usuario con el Angular TreeGrid mediante un menú emergente. Aparece cuando se hace clic con el botón derecho en la celda, el encabezado o el paginador. Además de los elementos de menú predeterminados incorporados, le permite agregar elementos de menú contextual personalizados.
Ancho y alto
Cambie el tamaño del Angular TreeGrid configurando las propiedades de ancho y alto. Aparecerán barras de desplazamiento horizontal y vertical cuando el contenido desborde el elemento Angular TreeGrid. Para que el Angular TreeGrid llene su contenedor principal, el usuario simplemente debe establecer la altura y el ancho al 100%.
Encabezados apilados
Los encabezados apilados permiten agrupar y visualizar los encabezados de las columnas de forma apilada. No hay límite para el número de columnas que se pueden apilar. El usuario puede realizar todas las acciones de Angular TreeGrid, incluso cuando las columnas están apiladas.
Accesibilidad
Navegación por teclado
El TreeGrid garantiza que cada celda sea accesible por teclado. Características principales como expandir o colapsar filas secundarias, ordenar, seleccionar y editar se pueden realizar utilizando solo comandos de teclado; no se requiere interacción con el mouse. Esto ayuda a crear aplicaciones altamente accesibles utilizando este componente.
Lector de pantalla
El Angular TreeGrid tiene soporte completo de accesibilidad WAI-ARIA. Su interfaz de usuario incluye elementos visuales de alto contraste, lo que ayuda a las personas con discapacidad visual a tener la mejor experiencia visual. Además, las descripciones válidas de la interfaz de usuario son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
De derecha a izquierda (RTL)
La representación de derecha a izquierda permite a los usuarios mostrar el texto y el diseño del Angular TreeGrid de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para los idiomas RTL.
Compatibilidad con versiones de Angular
El Angular TreeGrid se mantiene actualizado para hacerlo compatible con las versiones de Angular desde la 4 hasta la última versión.
Otros frameworks compatibles
El TreeGrid está disponible para los frameworks Blazor, React, JavaScript y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El Angular TreeGrid funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No está seguro de cómo crear su primer Angular TreeGrid? Nuestros videos tutoriales y documentación pueden ayudar.
Me encantaría verlo ahora Me encantaría leerlo ahoraMás de 150+ componentes de interfaz de usuario de Angular
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
Visualización de datos
MENÚS DESPLEGABLES
VISUALIZADORES Y EDITORES DE ARCHIVOS
BOTONES
CHAT INTERACTIVO
ENTRADAS
NAVEGACIÓN
FORMAS
NOTIFICACIÓN
Preguntas frecuentes
¿Por qué debería elegir el Syncfusion® Angular TreeGrid?
Los usuarios pueden cargar grandes cantidades de datos cargando dinámicamente datos secundarios bajo demanda.
Incluye interacciones de interfaz de usuario como expandir y colapsar registros principales, edición de diálogos y más.
Vinculación de datos flexible con soporte para usar fuentes de datos locales y remotas como JSON, servicios RESTful, servicios OData y servicios WCF.
- Apariencia de interfaz de usuario atractiva con temas integrados como Fabric, Bootstrap, etc.
- Configuración y API sencillas.
- Soporte para todos los navegadores modernos.
- Interfaz de usuario táctil y receptiva.
Los amplios recursos de aprendizaje como demostraciones, documentación y videos permiten a los usuarios comenzar rápidamente con el Angular TreeGrid.
¿Dónde puedo encontrar la demostración de Syncfusion® Angular TreeGrid?
Puede encontrar nuestra demostración de Angular Tree Grid, que demuestra cómo representar y configurar el TreeGrid.
¿Puedo descargar y utilizar el Syncfusion® Angular TreeGrid de forma gratuita?
No, este es un producto comercial y requiere de una licencia paga. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas e individuos cuyas organizaciones tengan menos de $1 millón de dólares en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con el Syncfusion® Angular TreeGrid?
Un buen lugar para comenzar sería nuestra completa documentación de inicio.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
An amazing toolset to accelerate UI development
The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.
Shrikant P
Customer Success Manager
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
Ver historias de éxito reales
Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.
Explorar estudios de casoIndustria
Desarrollo de software
75% Reducción de costos
50% Desarrollo más rápido
Industria
Servicios públicos (petróleo y gas)
450+ horas ahorradas
Procesos optimizados y horas de esfuerzo de desarrollo ahorradas.
Funciones avanzadas y flexibles
Usuarios potenciados mediante una funcionalidad sólida y versátil.
Industria
Software y tecnología
1000+ horas ahorradas
Desarrollo acelerado con componentes de interfaz de usuario listos para empresa.
Gestión eficiente de archivos
Flujos de trabajo optimizados con bibliotecas de documentos sin crearlas desde cero.
Industria
Software y tecnología
2 años de retraso evitado
Se evitaron dos años de retrasos gracias a la planificación proactiva.
Entrega punctual
Proyectos entregados a tiempo utilizando controles de confianza.
Industria
Servicios de TI y consultoría de TI
Rendimiento Mejorado
Grandes conjuntos de datos gestionados con fácil personalización y depuración rápida.
Altamente personalizable
Controles plug-and-play con integración rápida de plantillas.
Industria
Servicios profesionales
Acceso instantáneo
Disponibilidad rápida de funciones y recursos.
Dependencias reducidas
Menos dependencias para un desarrollo más rápido.
Calificado por usuarios de todo el mundo
Recursos de Syncfusion® Angular TreeGrid
Soporte técnico
Contactar a soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Contactar a soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Kits de IU
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
