1. Продукты
  2.   Зритель
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Создавайте интерактивные древовидные структуры с jQuery

Создавайте, управляйте и визуализируйте иерархические данные с этим мощным древовидным плагином.

Что такое API jsTree?

jsTree преобразует сложные данные JSON в интерактивные иерархические древовидные структуры, предоставляя разработчикам мощный способ визуализации и навигации по вложенным объектам JSON. Построенный как плагин jQuery, он конвертирует сырой JSON в раскрывающиеся/сворачиваемые узлы - идеально подходит для анализа ответов API, конфигурационных файлов или любых иерархических наборов данных.

Ключевые возможности визуализации JSON:

  • Преобразование JSON-в-дерево: Автоматически отображает массивы/объекты JSON как родительские/дочерние узлы
  • Интерактивное исследование: Раскрывайте/сворачивайте узлы для анализа глубоких структур JSON
  • Динамическая загрузка: Отложенная загрузка (lazy) больших наборов данных JSON для оптимизации производительности
  • Пользовательское отображение узлов: Стилизация узлов на основе типов данных JSON (массивы, объекты, значения)
  • Поиск & фильтрация: Быстро находите ключи/значения в сложных JSON-деревьях

В отличие от плоских JSON-просмотрщиков, jsTree сохраняет иерархию и отношения в ваших данных, что делает его идеальным для отладки API или документирования вложенных JSON-схем.

GitHub

Статистика GitHub

Имя:
Язык:
Звезды:
Вилки:
Лицензия:
Репозиторий последний раз обновлялся на

Почему стоит выбрать jsTree?

  • Проверенное решение: Более 10 лет активной разработки
  • Легковесный: Требует только jQuery в качестве зависимости
  • Доступность: Соответствует WCAG 2.0
  • Обширная документация: Полная справочная информация по API
  • Лицензия MIT: Бесплатен для коммерческого использования

Установка

jsTree можно установить через менеджеры пакетов или подключить напрямую из CDN.

Установка через NPM


npm install jstree

Примечание: Не забудьте подключить jQuery перед jsTree.

Примеры кода

Изучите возможности jsTree с этими примерами:

jsTree

Пример 1: Базовое дерево из HTML

Самый простой способ создать jsTree - преобразовать вложенные HTML-списки. Этот подход идеален, когда ваша древовидная структура статична или при создании прототипов. Плагин автоматически преобразует вложенную структуру UL/LI в интерактивное дерево с функционалом раскрытия/сворачивания. Базовая реализация требует минимального JavaScript и отлично работает для простых навигационных меню или структур контента.

Демонстрируемые функции:

  • Преобразование HTML-в-дерево
  • Функционал раскрытия/сворачивания
  • Базовая тема

Пример 2: Загрузка данных через JSON

Для динамических приложений jsTree может загружать данные из JSON. Этот подход более гибкий и позволяет программно строить древовидную структуру. Формат JSON интуитивен, каждый узел имеет свойства вроде "id", "text", "children" и "state". Вы также можете указать иконки, отключенные состояния и другие атрибуты для каждого узла. Этот метод особенно полезен, когда данные дерева поступают из базы данных или API.

Пример 3: Флажки и перетаскивание

jsTree предоставляет плагины, расширяющие его основную функциональность. Плагин флажков добавляет выбираемые флажки к каждому узлу, а плагин dnd позволяет операции перетаскивания. Эти функции необходимы для создания интерфейсов вроде файловых менеджеров или систем разрешений, где пользователям нужно выбирать несколько элементов или реорганизовывать иерархию. Плагины сохраняют производительность дерева даже с сотнями узлов.

Продвинутые функции

jsTree поддерживает профессиональные рабочие процессы:

  • Отложенная загрузка: Загружайте узлы по требованию:

    Отложенная загрузка

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Обработка событий: Реагируйте на взаимодействия с деревом:

    Обработчики событий

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Выбранные узлы:', data.selected);
    });
  • Пользовательские темы: Стилизуйте ваше дерево:

    Пользовательская тема

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

Заключение

jsTree предоставляет надежное решение для визуализации иерархических данных. Идеально подходит для:

  • Файловых менеджеров: Навигация по структурам каталогов
  • Навигационных меню: Создание многоуровневых меню
  • Интерфейсов CMS: Управление иерархиями контента
  • Инструментов конфигурации: Редактирование вложенных настроек

Благодаря расширенной системе плагинов и активной поддержке, jsTree остается предпочтительным решением для древовидных структур в веб-приложениях.

Похожие Продукты

 Русский