JavaScript Tree UI виджет

JavaScript DataTree - это виджет для отображения структурированных данных в виде иерархически организованного списка - дерева. Такой способ отображения данных позволяет экономить рабочее пространство и выводить больше информации за счет ее группировки и возможности сворачивать и разворачивать ветви, содержащие данные. Webix предлагает готовое и продуманное решение со множеством фич, поддержкой горячих клавиш, drag-n-drop, фильтров и прочих улучшений. Продуманная экосистема Webix позволит легко интегрировать JS дерево, наполнить его данными и настроить нужный дизайн. Ознакомитесь с демонстрационным примером ниже. Скачайте UI библиотеку Webix, чтобы опробовать Tree виджет на практике.

живое демо

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

Возможности JS Tree виджета

Webix Tree - это виджет для вывода данных в виде древесных списков. Наша команда разработала множество фич и UI контролов, которые Вы можете использовать в своей работе. Используйте фреймворк Webix, чтобы создавать бизнес приложения, насыщенные данными, экономьте свое рабочее время за счет готового дизайна и виджетов Webix.

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

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

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

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

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

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

Чекбоксы с тремя состояниями в Data 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 поддерживает разные режимы фильтрации. Вы можете определить, отображать ли дочерние узлы отфильтрованных элементов дерева. Вы можете определить, разворачивать ли родительские узлы найденных элементов. Вы также можете указать, какие уровни доступны для фильтрации. Вы можете комбинировать все три опции для достижения желаемого эффекта.

Сортировка

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