1. Produtos
  2.   Visualizador
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Construa Estruturas em Árvore Interativas com jQuery

Crie, gerencie e visualize dados hierárquicos com este poderoso plugin de árvore.

O que é a API jsTree?

O jsTree transforma dados JSON complexos em estruturas hierárquicas interativas em árvore, oferecendo aos desenvolvedores uma forma poderosa de visualizar e navegar por objetos JSON aninhados. Construído como um plugin jQuery, ele converte JSON bruto em nós expansíveis/colapsáveis - perfeito para inspecionar respostas de API, ficheiros de configuração ou qualquer conjunto de dados hierárquicos.

Principais funcionalidades de visualização JSON:

  • Conversão JSON-para-Árvore: Renderiza automaticamente arrays/objetos JSON como nós pai/filho
  • Exploração Interativa: Expanda/cole nós para analisar estruturas JSON profundas
  • Carregamento Dinâmico: Carregamento lazy de grandes conjuntos de dados JSON para otimizar performance
  • Renderização Personalizada de Nós: Estilize nós com base em tipos de dados JSON (arrays, objetos, valores)
  • Pesquisa & Filtragem: Localize rapidamente chaves/valores em árvores JSON complexas

Ao contrário de visualizadores JSON planos, o jsTree preserva a hierarquia e relações nos seus dados, tornando-o ideal para depuração de APIs ou documentação de esquemas JSON aninhados.

GitHub

Estatísticas do GitHub

Nome:
Linguagem:
Estrelas:
Garfos:
Licença:
O repositório foi atualizado pela última vez em

Por que escolher o jsTree?

  • Solução consolidada: Mais de 10 anos de desenvolvimento ativo
  • Leve: Requer apenas jQuery como dependência
  • Acessível: Compatível com WCAG 2.0
  • Documentação abrangente: Referência API completa
  • Licença MIT: Gratuito para uso comercial

Instalação

O jsTree pode ser instalado via gestores de pacotes ou incluído diretamente de um CDN.

Instalação por NPM


npm install jstree

Nota: Não se esqueça de incluir jQuery antes do jsTree.

Exemplos de Código

Explore as capacidades do jsTree com estes exemplos:

jsTree

Exemplo 1: Árvore Básica a partir de HTML

A forma mais simples de criar um jsTree é convertendo listas HTML aninhadas. Esta abordagem é ideal quando a sua estrutura em árvore é estática ou durante prototipagem. O plugin converte automaticamente a estrutura UL/LI aninhada numa árvore interativa com funcionalidade de expandir/colapsar. A implementação básica requer JavaScript mínimo e funciona bem para menus de navegação simples ou estruturas de conteúdo.

Funcionalidades demonstradas:

  • Conversão HTML-para-Árvore
  • Funcionalidade expandir/colapsar
  • Tema básico

Exemplo 2: Carregamento de Dados via JSON

Para aplicações dinâmicas, o jsTree pode carregar dados de JSON. Esta abordagem é mais flexível e permite construir a estrutura em árvore programaticamente. O formato JSON é intuitivo, com cada nó tendo propriedades como "id", "text", "children" e "state". Pode também especificar ícones, estados desativados e outros atributos para cada nó. Este método é particularmente útil quando os dados da árvore vêm de uma base de dados ou API.

Exemplo 3: Checkboxes e Arrastar-e-Soltar

O jsTree fornece plugins que estendem sua funcionalidade central. O plugin de checkboxes adiciona caixas de seleção a cada nó, enquanto o plugin dnd permite operações de arrastar-e-soltar. Estas funcionalidades são essenciais para construir interfaces como gestores de ficheiros ou sistemas de permissões onde os utilizadores precisam selecionar múltiplos itens ou reorganizar a hierarquia. Os plugins mantêm a performance da árvore mesmo com centenas de nós.

Funcionalidades Avançadas

O jsTree suporta fluxos de trabalho profissionais:

  • Carregamento lazy: Carregue nós sob demanda:

    Carregamento Lazy

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Manuseamento de Eventos: Reaja a interações com a árvore:

    Ouvintes de Eventos

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Nós selecionados:', data.selected);
    });
  • Temas Personalizados: Estilize a sua árvore:

    Tema Personalizado

    
    $('#tree').jstree({
      'themes': {
        'name': 'custom',
        'dots': false,
        'icons': false
      }
    });

Conclusão

O jsTree fornece uma solução robusta para visualização de dados hierárquicos. Ideal para:

  • Navegadores de ficheiros: Navegue por estruturas de diretórios
  • Menus de navegação: Crie menus multi-nível
  • Interfaces de CMS: Gerencie hierarquias de conteúdo
  • Ferramentas de configuração: Edite configurações aninhadas

Com seu extenso sistema de plugins e manutenção ativa, o jsTree permanece a solução preferida para estruturas em árvore em aplicações web.

Produtos Similares

 Portugese