1. Продукти
  2.   Переглядач
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Створюйте інтерактивні дерева за допомогою jQuery

Створюйте, керуйте та візуалізуйте ієрархічні дані з цим потужним деревним плагіном

Що таке API jsTree?

jsTree перетворює складні дані JSON на інтерактивні ієрархічні дерева, надаючи розробникам потужний інструмент для візуалізації та навігації вкладених об'єктів JSON. Як плагін jQuery, він конвертує необроблений JSON у вузли, які можна розгортати/згортати - ідеально підходить для аналізу відповідей API, файлів конфігурації чи будь-яких ієрархічних наборів даних.

Ключові функції для візуалізації JSON:

  • Перетворення JSON у дерево: Автоматично відображає масиви/об'єкти JSON як батьківські/дочірні вузли
  • Інтерактивне дослідження: Розгортайте/згортайте вузли для аналізу глибоких структур JSON
  • Динамічне завантаження: "Ліниве" завантаження великих наборів даних 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 залишається основним рішенням для деревних структур у веб-додатках.

Подібні Продукти

 Ukrainian