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

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

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

Какво е jsTree API?

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

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

  • JSON към дърво преобразуване: Автоматично рендира JSON масиви/обекти като родителски/дъщерни възли
  • Интерактивно изследване: Разгъване/свиване на възли за навлизане в дълбоки JSON структури
  • Динамично зареждане: Лениво зареждане на големи JSON набори от данни за оптимизиране на производителността
  • Персонализирано рендиране на възли: Стилизиране на възли въз основа на JSON типове данни (масиви, обекти, стойности)
  • Търсене & Филтриране: Бързо намиране на ключове/стойности в сложни дървовидни структури

За разлика от плоски JSON визуализатори, jsTree запазва йерархията и взаимоотношенията във вашите данни, което го прави идеален за дебъгване на APIs или документиране на вложени 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 форматът е straightforward, като всеки възел има свойства като "id", "text", "children", и "state". Можете също да укажете икони, disabled състояния и други атрибути за всеки възел. Този метод е особено полезен, когато вашите дървовидни данни идват от база данни или API.

Пример 3: Чекбоксове и Drag & Drop

jsTree предоставя плъгини, които разширяват основната функционалност. Плъгинът за чекбоксове добавя избираеми чекбоксове към всеки възел, докато dnd плъгинът позволява drag-and-drop операции. Тези функции са съществени за изграждане на интерфейси като файлови мениджъри или системи за разрешения, където потребителите трябва да избират множество елементи или да реорганизират йерархията. Плъгините поддържат производителността на дървото дори със стотици възли.

Разширени функции

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 остава изборът номер едно за дървовидни структури в уеб приложения.

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

 Bulgarian