JavaScript Tree Grid - tabla HTML5 de alto rendimiento
- Carga grandes cantidades de datos cargando dinámicamente datos secundarios bajo demanda.
- Incluye interacciones de UI flexibles como expandir y contraer registros padre, edición de diálogos y más.
- Apariencia de UI HTML5 atractiva con temas integrados como fabric, bootstrap, etc.
Trusted by the world’s leading companies
Descripción General
El JavaScript TreeGrid es un control rico en funciones utilizado para visualizar datos autoreferenciales y jerárquicos de manera efectiva en un formato tabular (una estructura similar a un árbol). Su conjunto completo de funciones incluye many funcionalidades: enlace de datos, virtualización, edición, ordenamiento, búsqueda, filtrado, scroll infinito, paginación, filas y columnas fixed, exportación a múltiples formatos, filas de agregación y más.
¿Por qué elegir Syncfusion Essential Studio® JavaScript Tree Grid?
Alto rendimiento
Muestra datos jerárquicamente, su diseño optimizado proporciona alto rendimiento y carga millones de registros en solo unos segundos.
Seamless data binding
Enlaza datos de forma sin fisuras con varias fuentes de datos locales y remotas como JSON, OData, WCF y servicios web RESTful con la ayuda de un administrador de datos.
Cuadrícula autoreferencial y jerárquica
El JavaScript Tree Grid está diseñado para visualizar datos autoreferenciales y jerárquicos en un formato tabular. Esto a su vez muestra la relación entre registros padre e hijo.
Edición flexible
El JavaScript Tree Grid realiza operaciones crear, leer, actualizar y eliminar (CRUD) con datos observables. Edita con un Array de JSON o servicio de datos remoto con el administrador de datos.
Se adapta a cualquier resolución
El JavaScript Tree Grid tiene un diseño altamente responsive y un diseño optimizado para escritorios, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows OS.
Crea tus propios diseños de plantillas
Usando plantillas, los usuarios pueden crear una UI personalizada en el JavaScript Tree Grid basada en las necesidades de su aplicación usando una amplia gama de opciones de plantilla.
Temas atractivos y personalizables
Diseño de vanguardia con 5+ temas integrados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utiliza la herramienta Theme Studio en línea para personalizar temas del Tree Grid fácilmente.
Globalización y localización
Permite que usuarios de diferentes configuraciones regionales usen el Tree Grid formateando fechas, moneda y numeración según sus preferencias.
Ejemplo de Código de JavaScript Tree Grid
Comienza fácilmente con el JavaScript Tree Grid usando algunas líneas simples de HTML y código TS como se demuestra a continuación. También explora nuestro Ejemplo de JavaScript Tree Grid que te muestra cómo renderizar y configurar un TreeGrid en JavaScript.
<div class="control-section">
<div class="content-wrapper">
<div id="TreeGrid">
</div>
</div>
</div>import { TreeGrid, Page } from '@syncfusion/ej2-treegrid';
import { sampleData } from './data-source';
/**
* Default TreeGrid sample
*/
TreeGrid.Inject(Page);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
height: 350,
treeColumnIndex: 1,
allowPaging: true,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
{ field: 'priority', headerText: 'Priority', width: 90 }
]
});
treegrid.appendTo('#TreeGrid');
Indicador de carga esqueleto
El Tree Grid muestra el efecto shimmer como indicador de carga mientras obtiene datos y los enlaza a la cuadrícula de árbol durante la renderización inicial, actualización o después de realizar acciones de cuadrícula como ordenamiento, filtrado y más. El Tree Grid ofrece dos tipos de efectos, spinner y shimmer.
Diseño de UI adaptativo
La interfaz de usuario del JavaScript Tree Grid está personalizada y rediseñada para grandes vistas y usabilidad en pantallas pequeñas. Los diálogos de filtrado, búsqueda y edición se adaptan al tamaño de la pantalla.
Columna
Las columnas definen el esquema de una fuente de datos en JavaScript Tree Grid. Las funciones incluyen formateo, definiciones de columnas, ajuste de texto, selector de columnas, menú de columnas, reordenamiento de columnas y otras funciones importantes.
Paginación
A través de la paginación, se puede ver un segmento de datos de la fuente de datos asignada. El JavaScript Tree Grid ofrece UI de paginador integrada con opciones para personalizar toda su UI. También tiene un modo de paginación bajo demanda para recuperación efectiva de datos de servicios web remotos.
Ordenamiento
El JavaScript Tree Grid permite a los usuarios ordenar una columna simplemente haciendo clic en el encabezado. Un Ctrl + clic en encabezado realiza multi-ordenamiento. Ordena datos en orden ascendente o descendente.
Filtrado
El filtrado ayuda a ver registros específicos o relacionados que cumplen con un criterio de filtrado dado. Soporta varios tipos de filtro que incluyen un potente filtro similar a Excel. El filtro del JavaScript Tree Grid permite a los usuarios elegir tipos de filtro apropiados, definir su propia lógica de filtrado personalizado y personalizar la UI de filtrado según las necesidades de su aplicación. Se puede definir filtrado con registros padre o hijo relacionados.
Selección
Tree Grid permite seleccionar filas o celdas. También se pueden seleccionar una o más filas o celdas manteniendo presionado Ctrl o Command, o programáticamente.
Fila
Las filas en Tree Grid representan la información de cada objeto de datos de la fuente de datos. Soporta expandir / contraer filas hijo, reordenamiento de filas, sangrar / desangrar filas para cambiar sus niveles de jerarquía y muchas más funciones.
Edición
El JavaScript TreeGrid proporciona soporte completo para operaciones de crear, leer, actualizar y eliminar (CRUD). Además de componentes de editor integrados para editar un valor de columna particular, usando soporte de plantilla los usuarios pueden crear componentes de editor personalizados que se adapten a las necesidades de su aplicación. Realiza operaciones de edición con colección JSON o servicio de datos remoto con la ayuda del administrador de datos.
Arrastrar y soltar filas
El JavaScript TreeGrid permite a los usuarios arrastrar y soltar filas dentro del mismo u otro tree grid. Esta función 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 usando 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 Frozen
Las columnas frozen son visibles en el lado izquierdo o derecho o en ambos lados de la cuadrícula de árbol y hacen que el contenido restante de la cuadrícula se pueda desplazar. Se usa principalmente para comparar valores de celdas.
Búsqueda
Puedes buscar los registros usando el método de búsqueda. Integra el cuadro de texto de búsqueda en la barra de herramientas del TreeGrid agregando elementos de búsqueda.
Tooltip personalizado
El componente Tree Grid permite establecer tooltips para las celdas del treegrid. Pasa el cursor sobre los nodos de árbol para mostrar el texto del tooltip.
Exportación
Exportación a Excel, PDF, CSV
Exporta fácilmente el control HTML5 Tree Grid a varios formatos de archivo como Excel, PDF o CSV. Los usuarios también pueden personalizar programáticamente el documento exportado.
Impresión
Los usuarios pueden imprimir datos ya sea usando la opción de impresión de la barra de herramientas o programáticamente. Imprime todas las filas de un JavaScript Tree Grid independientemente del número de páginas o imprime solo la página actualmente vista.
Funciones adicionales
Altura de fila
La altura de fila es un factor importante al afficher el número de registros en el viewport, y se puede personalizar sin esfuerzo según el requerimiento de UI de la aplicación. También es posible establecer la altura de fila condicionalmente.
Copiar al portapapeles
El portapapeles proporciona una opción para copiar los datos de filas o celdas seleccionadas al portapapeles. Usa 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 acción del usuario con JavaScript Tree Grid usando menú emergente. Aparece cuando se hace clic derecho en una celda, encabezado o paginador. Además de los elementos de menú predeterminados integrados, te permite agregar elementos de menú contextual personalizados.
Ancho y alto
Permite cambiar el tamaño del JavaScript Tree Grid estableciendo las propiedades de ancho y alto. Las barras de desplazamiento horizontal y vertical aparecerán cuando el contenido desborde el elemento JavaScript Tree Grid. Para que el JavaScript Tree Grid llene su contenedor padre, el usuario debe simplemente establecer el alto y ancho al 100%.
Encabezados apilados
Los encabezados apilados permiten agrupar y visualizar los encabezados de columna de manera apilada. No hay límite para el número de columnas que se pueden apilar. Permite al usuario realizar todas las acciones de JavaScript TreeGrid, incluso cuando las columnas están apiladas.
Accesibilidad
Navegación por teclado
El HTML5 Tree Grid asegura que cada celda sea accesible por teclado. Las funciones principales como expandir o contraer filas hijo, ordenar, seleccionar y editar se pueden realizar usando solo comandos de teclado; no se requiere interacción con el mouse. Esto ayuda a crear aplicaciones altamente accesibles usando este componente.
Lector de pantalla
El JavaScript Tree Grid tiene soporte completo de accesibilidad WAI-ARIA. Su UI incluye elementos visuales de alto contraste, ayudando a las personas con discapacidad visual a tener la mejor experiencia de visualización. Además, las descripciones válidas de UI son fácilmente accesibles a través de tecnologías asistivas como lectores de pantalla.
De derecha a izquierda (RTL)
La renderización de derecha a izquierda permite afficher el texto y diseño del JavaScript Tree Grid de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para idiomas RTL.
Otros frameworks compatibles
El Tree Grid está disponible para los frameworks Blazor, React, Angular y Vue. Explora sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El JavaScript Tree Grid funciona bien con todos los navegadores web modernos, incluyendo Chrome, Firefox, Edge, Safari y Opera.
¿No estás seguro de cómo crear tu primer JavaScript Tree Grid? Nuestra documentación puede ayudar.
Me encantaría leerlo ahoraMás de 155+ controles de interfaz de usuario de JavaScript
TODOS LOS CONTROLES
COMPONENTES INTELIGENTES
CUADRÍCULAS
MENÚS DESPLEGABLES
ENTRADAS DE DATOS
VISUALIZACIÓN DE DATOS
NAVEGACIÓN
BOTONES
CHAT INTERACTIVO
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
¿Por qué deberías elegir Syncfusion Essential Studio® JavaScript Tree Grid?
El JavaScript TreeGrid con un conjunto rico de funciones ofrece lo siguiente:
Carga grandes cantidades de datos cargando dinámicamente datos secundarios bajo demanda.
Incluye interacciones de UI flexibles como expandir y contraer registros padre, edición de diálogos y más.
Enlace de datos flexible con soporte para usar fuentes de datos locales y remotas como JSON, servicios RESTful, servicios OData y servicios WCF.
- Uno de los mejores JavaScript Tree Grid del mercado que ofrece UI rica en funciones para interactuar con el software.
- Apariencia de UI atractiva con temas integrados como fabric, bootstrap, etc.
Configuración simple y API.
- Compatible con todos los navegadores modernos.
- Amigable con pantalla táctil móvil y responsive.
Abundantes recursos de aprendizaje como demos y documentación para aprender rápidamente y comenzar con JavaScript Tree Grid.
¿Dónde puedo encontrar el demo de Syncfusion JavaScript Tree Grid?
Puedes encontrar nuestro demo de JavaScript TreeGrid, que demuestra cómo renderizar y configurar Tree Grid.
¿Puedo descargar y utilizar Syncfusion JavaScript Tree Grid gratis?
No, este es un producto comercial y requiere una licencia pagada. Sin embargo, una licencia comunitaria gratuita también está disponible para compañías e individuos cuya organización tenga menos de $1 millón USD en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con Syncfusion JavaScript Tree Grid?
Un buen lugar para empezar sería nuestra completa documentación de inicio rápido.
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.
Light and fast
I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version
Alexis A,
Software Architect
Syncfusion - Great controls and terrific support
The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It’s priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.
David B,
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 JavaScript Tree Grid de Syncfusion
Soporte Técnico
Contactar Soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Contactar Soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Kits de UI
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.
