JavaScript UI виджет Tree

JavaScript Tree позволяет отображать иерархические данные привлекательным и логичным образом. С помощью этого Webix виджета, вы можете ясно видеть все уровни данных.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Примеры интеграции с PHP, Node.js и .NET
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Разворачивайте и сворачивайте узлы дерева

Узлы Webix Tree, имеющие ветки, можно легко разворачивать и сворачивать одним кликом, что помогает экономить пространство экрана.

Кликните по 'плюсу', чтобы развернуть дерево

Динамическая загрузка данных

Динамическая загрузка данных позволяет загружать уровни дерева асинхронно. При инициализации дерева загружается только первый уровень. Если развернуть ветку дерева, ее ID отправляется на сервер и ее данные динамически загружаются.

Нажмите на 'плюс', чтобы загрузить данные в ветку

Чекбоксы с тремя состояниями в Tree

Вы можете добавлять каждому узлу дерева чекбоксы с двумя или тремя состояниями. Третье состояние чекбокса - неопределенное, оно показывает, что не все дочерние узлы выделены. Благодаря такому чекбоксу можно выделять все элементы дерева по клику на чекбокс их родительского узла.

Чекбокс с тремя состояниями (первое дерево) и стандартный чекбокс с двумя состояниями (второе дерево).

Навигация с помощью клавиатуры

Вы можете ориентироваться по Webix Tree с помощью клавиатуры, что помогает меньше пользоваться мышкой во время работы с виджетом.

Щелкните по любому узлу дерева и с помощью клавиш со стрелками передвигайтесь по дереву и сворачивайте/разворачивайте узлы

Операции управления данными

Этот виджет позволяет совершать операции управления данными: добавление, удаление, копирование, вставка и редактирование.

Кликните по любому элементу дерева, чтобы изменить его.

Иконки

Дизайн Webix Tree полностью создан с помощью CSS, что делает работу с ним быстрее и проще. Вы можете использовать свои иконки для узлов дерева.

Drag-and-drop

Вы можете перетаскивать элементы JavaScript Tree не только внутри одного дерева и между разными деревьями, но и между Tree и Datatable, List, Dataview и TreeTable.

Выберите несколько элементов (Ctrl+click) и начните перетаскивать их. Всплывающая подсказка покажет количество перетаскиваемых элементов

Сохранение состояния JavaScript Tree

Вы можете сохранять состояние Tree в cookie-файлы, локальное или сессионное хранилище, при необходимости состояние можно восстановить. Объект состояния включает данные о развернутых и выбранных узлах. Сохранение помогает пользователям не потерять состояние приложения при обновлении страницы.

Нажмите на 'Save state', сверните, разверните и выделите элементы дерева. Затем нажмите 'Restore state'.

Буфер обмена

Вы можете работать с буфером обмена, используя этот виджет. Вы можете скопировать содержимое элемента дерева с помощью Ctrl+C, затем вставить его в другой узел дерева или в другой виджет или контейнер. Вы также можете определить свою логику для вставки текста.

Кликните по любому элементу дерева и нажмите Ctrl+C, чтобы скопировать текст. Перейдите к textarea и нажмите Ctrl+V, чтобы вставить туда текст.

Фильтрация

JavaScript компонент Tree поддерживает разные режимы фильтрации. Вы можете определить, отображать ли дочерние узлы отфильтрованных элементов дерева. Вы можете определить, разворачивать ли родительские узлы найденных элементов. Вы также можете указать, какие уровни доступны для фильтрации. Вы можете комбинировать все три опции для достижения желаемого эффекта.

Сортировка

Вы можете сортировать узлы дерева. Вы можете сами определять логику сортировки. Например, вы можете сортировать только родительские узлы, сохраняя дочерние на прежнем месте.