JavaScript DataTree - это виджет для отображения структурированных данных в виде иерархически организованного списка - дерева. Такой способ отображения данных позволяет экономить рабочее пространство и выводить больше информации за счет ее группировки и возможности сворачивать и разворачивать ветви, содержащие данные. Webix предлагает готовое и продуманное решение со множеством фич, поддержкой горячих клавиш, drag-n-drop, фильтров и прочих улучшений. Продуманная экосистема Webix позволит легко интегрировать JS дерево, наполнить его данными и настроить нужный дизайн. Ознакомитесь с демонстрационным примером ниже. Скачайте UI библиотеку Webix, чтобы опробовать Tree виджет на практике.
живое демо
Webix Tree - это виджет для вывода данных в виде древесных списков. Наша команда разработала множество фич и UI контролов, которые Вы можете использовать в своей работе. Используйте фреймворк Webix, чтобы создавать бизнес приложения, насыщенные данными, экономьте свое рабочее время за счет готового дизайна и виджетов Webix.
Functionality
Узлы Webix Data Tree, имеющие ветки, можно легко разворачивать и сворачивать одним кликом, что помогает экономить пространство экрана.
Кликните по 'плюсу', чтобы развернуть дерево
Динамическая загрузка данных позволяет загружать уровни дерева асинхронно. При инициализации дерева загружается только первый уровень. Если развернуть ветку дерева, ее ID отправляется на сервер и ее данные динамически загружаются.
Нажмите на 'плюс', чтобы загрузить данные в ветку
Вы можете добавлять каждому узлу дерева чекбоксы с двумя или тремя состояниями. Третье состояние чекбокса - неопределенное, оно показывает, что не все дочерние узлы выделены. Благодаря такому чекбоксу можно выделять все элементы дерева по клику на чекбокс их родительского узла.
Чекбокс с тремя состояниями (первое дерево) и стандартный чекбокс с двумя состояниями (второе дерево).
Вы можете ориентироваться по Webix Tree с помощью клавиатуры, что помогает меньше пользоваться мышкой во время работы с виджетом.
Щелкните по любому узлу дерева и с помощью клавиш со стрелками передвигайтесь по дереву и сворачивайте/разворачивайте узлы
Этот виджет позволяет совершать операции управления данными: добавление, удаление, копирование, вставка и редактирование.
Кликните по любому элементу дерева, чтобы изменить его.
Дизайн Webix Tree полностью создан с помощью CSS, что делает работу с ним быстрее и проще. Вы можете использовать свои иконки для узлов дерева.
Вы можете перетаскивать элементы JavaScript Tree не только внутри одного дерева и между разными деревьями, но и между Tree и Datatable, List, Dataview и TreeTable.
Выберите несколько элементов (Ctrl+click) и начните перетаскивать их. Всплывающая подсказка покажет количество перетаскиваемых элементов
Вы можете сохранять состояние Tree в cookie-файлы, локальное или сессионное хранилище, при необходимости состояние можно восстановить. Объект состояния включает данные о развернутых и выбранных узлах. Сохранение помогает пользователям не потерять состояние приложения при обновлении страницы.
Нажмите на 'Save state', сверните, разверните и выделите элементы дерева. Затем нажмите 'Restore state'.
Вы можете работать с буфером обмена, используя этот виджет. Вы можете скопировать содержимое элемента дерева с помощью Ctrl+C, затем вставить его в другой узел дерева или в другой виджет или контейнер. Вы также можете определить свою логику для вставки текста.
Кликните по любому элементу дерева и нажмите Ctrl+C, чтобы скопировать текст. Перейдите к textarea и нажмите Ctrl+V, чтобы вставить туда текст.
JavaScript компонент Tree поддерживает разные режимы фильтрации. Вы можете определить, отображать ли дочерние узлы отфильтрованных элементов дерева. Вы можете определить, разворачивать ли родительские узлы найденных элементов. Вы также можете указать, какие уровни доступны для фильтрации. Вы можете комбинировать все три опции для достижения желаемого эффекта.
Вы можете сортировать узлы дерева. Вы можете сами определять логику сортировки. Например, вы можете сортировать только родительские узлы, сохраняя дочерние на прежнем месте.
Создавайте красивые интерфейсы с UI библиотекой Webix
