Top 5: los mejores plugins de vista de arbol (Treeview) para jQuery y Javascript

Top 5: los mejores plugins de vista de arbol (Treeview) para jQuery y Javascript

Es posible que desees dejar de lado la tarea de crear tu propia vista de árbol para mostrar una lista de archivos u otro tipo de vista de árbol, ya que hay muchos complementos que hacen el truco por ti.

Estos complementos de vista de árbol son los mejores complementos de TreeView de código abierto que puede encontrar para javascript y jQuery.

5. jQuery file tree

Github | Demo

jQueryFileTree es un complemento de navegador de archivos AJAX configurable para jQuery.

  • Produce XHTML semántico válido.
  • Totalmente personalizable mediante CSS.
  • Posibilidad de diseñar iconos según la extensión del archivo.
  • Utiliza AJAX para obtener información de archivos sobre la marcha.
  • Fácil de configurar e implementar.
  • Incluye scripts de conector para PHP y ASP.NET (C #).
  • Admite scripts de conectores personalizados para una funcionalidad ampliada.
  • Evento de expansión / contracción personalizable.
  • Velocidades de expansión / contracción personalizables.
  • Admite funciones de aceleración.
  • Vistas de una y varias carpetas.
  • Mensaje de carga configurable.
  • Selección múltiple con casillas de verificación.
  • Apoya la escucha de eventos en acciones únicas.

jQuery file tree demo

4. Bootstrap Treeview

Github | Demo

Bootstrap treeview es una solución simple y elegante para mostrar estructuras de árbol jerárquicas (vista de árbol) mientras se aprovecha lo mejor que Twitter Bootstrap tiene para ofrecer. Permitir devolución de llamada de eventos como nodeSelected, nodeChecked, nodeExpanded, etc. Personalización de iconos (fuente impresionante o glifos).

Bootstrap treeview

 

3. jqTree

Github | Demo

Introduction JqTree es un widget de jQuery para mostrar una estructura de árbol en html. Es compatible con la carga de datos a través de ajax.

  • Crea un árbol a partir de datos JSON.
  • Arrastrar y soltar.
  • Funciona en ie7 +, firefox 3.6+, chrome y safari.
  • Escrito en Coffeescript.

2. jsTree

Github | Demo

jsTree es el complemento jquery, que proporciona árboles interactivos. Es absolutamente gratuito, de código abierto y se distribuye bajo la licencia MIT. jsTree es fácilmente ampliable, temático y configurable, admite fuentes de datos HTML y JSON, AJAX y carga de devolución de llamada asíncrona. jsTree funciona correctamente en cualquier modelo de caja (caja de contenido o caja de borde), se puede cargar como un módulo AMD y tiene un tema móvil integrado para un diseño receptivo, que se puede personalizar fácilmente. Utiliza el sistema de eventos de jQuery, por lo que vincular devoluciones de llamada en varios eventos en el árbol es familiar y fácil.

  • soporte para arrastrar y soltar.
  • navegación por teclado.
  • editar, crear y eliminar en línea.
  • casillas de verificación de tres estados.
  • búsqueda difusa.
  • tipos de nodos personalizables.

jsTree te permite completar la vista de árbol utilizando datos HTML, Javascript o JSON.

jsTree

1. FancyTree

GithubDemo

Fancytree es un complemento de vista de árbol dinámico de JavaScript para jQuery con soporte para persistencia, teclado, casillas de verificación, tablas, arrastrar y soltar y carga diferida. Este complemento proporciona una gran cantidad de complementos opcionales incorporados como:

  • Edición en línea (le permite cambiar los títulos de los nodos mediante la edición en línea).
  • Arrastrar y soltar (Arrastrar nodos de árbol (dentro del mismo o entre árboles diferentes) se comporta como una interfaz de usuario de jQuery estándar que se puede arrastrar, es decir, permite soltar nodos en elementos desplegables estándar.
  • Juega bien con FontAwesome.
  • Muchas devoluciones de llamada para personalizar casi todo.
  • Múltiples temas pero personalizables si lo desea.
  • Una API amigable que le permite agregar nodos dinámicamente al nodo seleccionado.

Fancy tree plugin

Extra

jQuery bonsai

Github

jquery-bonsai es un complemento ligero de jQuery que toma una gran lista anidada y la reduce a un pequeño control de árbol expandible. También incluye soporte para casillas de verificación (incluido el estado 'indeterminado'), botones de opción y para poblar el árbol usando una fuente de datos JSON. Muy útil si quieres un uso minimalista y personalizarlo tú mismo.

jQuery bonsai demo

Treed

Github

Treed es un curioso complemento de vista de árbol que te permite mostrar, editar datos dinámicamente en una vista de árbol, es compatible con el administrador de deshacer. Treed se construye utilizando el patrón MVC de tal manera que es simple, por ejemplo, crear una vista completamente diferente para el árbol.

También puedes crear tu propia clase "Node" si deseas hacer algo más que tener una sola entrada de texto. Puedes agregar botones, más campos, lo que quieras! (ten en cuenta que el gráfico del lado derecho está construido con d3.js, no con la biblioteca en sí)

Treed demo

Si conoces otro complemento increíble de TreeView, compártelo con nosotros en el cuadro de comentarios. Que te diviertas

Esto podria interesarte

Conviertete en un programador más sociable