Визуализация деревьев с функциональностью Drag&Drop

21.03.22

Разработка - Работа с интерфейсом

+7 –1
>
  • 1.png
  • v2.png
В статье приведен пример реализации визуализации деревьев с функциональностью Drag&Drop.

Файлы

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование Скачано Купить файл
Визуализация деревьев с функциональностью Drag&Drop:
.epf 48,35Kb
19 2 500 руб. Купить

Подписка PRO — скачивайте любые файлы со скидкой до 85% из Базы знаний

Оформите подписку на компанию для решения рабочих задач

Оформить подписку и скачать решение со скидкой

Вы можете заказать платную доработку или адаптацию этой разработки под вашу конфигурацию на «Бирже заказов».

  • 0% комиссии — оплата напрямую исполнителю;
  • Исполнители любого масштаба — от отдельных специалистов до команд под проект;
  • Прямой обмен контактами между заказчиком и исполнителем;
  • Безопасная сделка — при необходимости;
  • Рейтинги, кейсы и прозрачная система откликов.

Исходная задача

Согласно ITIL 4, CMDB — Configuration Management Data Base — переводится как «база данных управления конфигурацией». Это глобальное хранилище, которое включает все элементы ИТ-инфраструктуры организации и логические связи между ними. CMDB охватывает как аппаратные и программные компоненты (серверы, ПК и т.д.), так и конфигурации. В результате складывается комплексная картина всего ИТ-ландшафта.

Необходимо реализовать функциональнось визуализации и интерактивного изменения дерева ИТ-ландшафта.

 

Какие инструменты были опробованы?

1. Graphviz

2. jOrgChart

GraphVis очень крутой инструмент, но в данной ситуации он не подошёл. Единственная причина - он дает статическую картинку (нет возможности перемещать элементы - Drag&Drop)

jOrgChart - это плагин javascript, позволяющий визуализировать деревья в HTML и поддерживающий функциоанльность Drag&Drop.

За основу была взята обработка Сергея Белькина. 

Что было добавлено/изменено:

1. Добавлен механизм анализа внесенных изменений (исходное дерево, текущее дерево);

2. Оптимизированы рекурсивные алгоритмы обработки деревьев;

3. Добавлен механиз хранения деревьев в виде массива предков. В теории, любой граф (дерево в частности) можно хранить тремя способами: список смежности, список ребер, матрица смежности. Плюс деревья можно хранить/обрабатывать в виде массива предков - что ускоряет работу алгоритма.

 

Общий алгоритм работы

 

Особенности реализации

1. Каждому элементу назначается ID - уникальный порядковый идентификатор, по которому будет проводиться обратное восстановление дерева объектов. При этом ID будет равен индексу массива предков, соответствующего дерева. На визуализации для каждого элемента будет добавляться строка "#IDxx" - это в принципе можно избежать - например, хранить ID скрытом теге <p> html.

2. Анализ изменений через массив. Текущее и исходное деревья хранятся не в типе данных ДеревоЗначений, а в массиве. Сделано для ускорения алгоритма.

Тестировал на платформе 1С:Предприятие 8.3 релиз 8.3.20.1674

 

Видео демонстрация функциональности Drag&Drop и анализа измененных объектов:

 

 

Вступайте в нашу телеграмм-группу Инфостарт

+7 –1

См. также

Infostart Dashboard: Монитор показателей, виджеты и дашборды в 1С 8.3

Работа с интерфейсом Анализ учета Мониторинг 1С:Предприятие 8 1С 8.3 1C:Бухгалтерия 1С:Бухгалтерия 3.0 1С:ERP Управление предприятием 2 1С:Управление холдингом 1С:Зарплата и Управление Персоналом 3.x 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Управление торговлей 11 Платные (руб)

Создайте свой функциональный интерфейс в любой конфигурации 1С с помощью расширения Infostart Dashboard. Настраивайте панели виджетов с метриками, индикаторами и показателями на начальном экране. Узнайте возможность внедрения подсистемы у себя в конфигурации с помощью бесплатной обработки "Анализ внедрения подсистемы 1С Infostart Dashboard"!

31720 руб.

27.03.2025    89859    69    44    

75
Удобные фильтры: динамические кнопки-закладки для списков в 1С

Консолидация данных Работа с интерфейсом Программист Пользователь 1С:Предприятие 8 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 1C:ERP Узбекистан Беларусь Кыргызстан Россия Казахстан Платные (руб)

Знакомая ситуация? Пользователи, особенно менеджеры, уверены: отборов много не бывает. Идут пожелания добавить в форму списка еще один быстрый фильтр, еще два, еще пять... В итоге интерфейс превращается в нагромождение полей отбора, а потребность в «самом главном» отборе, который «вот прямо сейчас нужен», все равно не закрыта. Универсальное расширение, которое решает эту проблему элегантно и технологично. С его помощью в любую форму списка можно легко добавить панель настраиваемых кнопок-закладок, каждая из которых применяет сложный фильтр-запрос, а так же показывает актуальное количество элементов в реальном времени.

6088 руб.

17.10.2025    2991    3    0    

2
Дизайнер форм 1С

Разработка Инструментарий разработчика Работа с интерфейсом Адаптация типовых решений Нейросети 1C:Бухгалтерия 1C:ERP 1С:ЗУП 1С:КА 1С:УНФ 1С:УТ 1С:Розница 1С:ДО 1С:ERP Управление предприятием 2 Платные (руб)

Разработка "Дизайнер форм 1С" реализована в виде расширения 1С и является универсальным инструментом для разработки прототипа форм с целью демонстраций, технических заданий и т.д. Без участия разработчика с возможностью экспорта в файл внешней обработки и генерации формы используя искусственный интеллект.

36600 руб.

28.08.2025    9478    2    2    

6
Дизайн Гайд для создания форм на 1С. Когда и как использовать различные элементы, примеры и антипримеры по использованию

Работа с интерфейсом Программист Стажер 1С:Предприятие 8 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024    54920    mrXoxot    44    

139
Прогресс-бар в поле динамического списка

Работа с интерфейсом Программист 1С:Предприятие 8 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024    29074    smielka    39    

119
Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Программист 1С 8.3 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

1 стартмани

10.04.2023    18470    186    acces969    31    

132
{UI/UX} Свой всплывающий информер у элемента формы

Работа с интерфейсом Программист 1С:Предприятие 8 1C:Бухгалтерия Бесплатно (free)

Питничная фантазия на возможности в разработке интерфейсов формы с помощью Платформы 1С - делаем свою подсказку. Публикация содержит готовую библиотеку программного формирования данной подсказки.

12.08.2022    15937    top_1c    39    

98
Модель состояния для MVC

Работа с интерфейсом Программист 1С:Предприятие 8 1C:Бухгалтерия Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    16637    kalyaka    8    

36
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. cmax 114 25.04.22 18:17 Сейчас в теме
Если в дереве - несколько первых строк, можно ли вывести несколько деревьев друг под другом?
если да - то как? я не смог понять.
Сейчас выводится только иерархия по первой строке.
+ – Ответить
3. farukshin 119 27.04.22 10:34 Сейчас в теме
(1)

Нельзя, т.к. это будет несвязный неориентированный граф (точнее лес), а не дерево.

Можно подвесить их к одной вершине, например "Все конфигурационные единицы". Преимущество такого решения - комплектующие можно будет не просто перемещать внутри одной КЕ, но и "выводить из эксплуатации" (вешая на эту вершину).
+ – Ответить
2. cmax 114 25.04.22 18:30 Сейчас в теме
И еще вопрос - где меняется цвет? меняю значения в функции ЗаполнитьЗначенияПоУмолчанию - ЦветПлашек, ширина, высота и другие - ничего не меняется абсолютно в отображении..
+ – Ответить
4. farukshin 119 27.04.22 10:36 Сейчас в теме
(2)

Все верно, меняется изменением значения реквизитов ЦветПлашек и т.п. При изменении цвета у вас css файлы меняются, но встроенный в 1С браузер их кэширует (на время сеанса 1С в каталоге временных файлов). Откройте новый сеанс - цвета поменяются.

Если вам кэширование не нужно - можно обойти разными способами, например:
1) в функции СозданыЗависимостиJS_CSS() в каталоге временных файлов создавать уникальный каталог, в котором хранить все файлы;
2) получать custom.css с рандомным параметром, в самом HTML заменить строку <link rel="stylesheet" href="css/custom.css?"/> на <link rel="stylesheet" href="css/custom.css?116"/>, где 116 - рандомное число. При этом custom.css будет принудительно считываться при каждом запросе.
+ – Ответить
5. cmax 114 27.04.22 10:38 Сейчас в теме
(4) Спасибо за ответ! буду пробовать.
+ – Ответить
6. cmax 114 28.04.22 16:12 Сейчас в теме
(4) Получилось с цветами и размерами. Все отлично.
Вопрос еще возник, возможно ли сделать перевертыш - перевернуть дерево вниз корнем?
Есть понимание как это сделать, если вообще возможно?
+ – Ответить
7. boss_kuz 107 25.04.25 19:18 Сейчас в теме
Не работает :((
1. Поле объекта не обнаружено (_dl_КонфигурационныеЕдиницы)
2. {ВнешняяОбработка._dl_ВизуализацияВзаимосвязей.Форма.Форма.Форма(357,11)}: Переменная не определена (_dl_ПоискВГлубинуВызовСервере)
Дерево = <<?>>_dl_ПоискВГлубинуВызовСервере.ПолучитьДерево(Истина, КонфигурационнаяЕдиница); (Проверка: Сервер)

Что то забыли доложить в обработку...
IT_CCM; +1 – Ответить
8. IT_CCM 29.01.26 14:48 Сейчас в теме
Минус за не работающую обработку у меня тоже самое
1. Поле объекта не обнаружено (_dl_КонфигурационныеЕдиницы)
2. {ВнешняяОбработка._dl_ВизуализацияВзаимосвязей.Форма.Форма.Форма(357,11)}: Переменная не определена (_dl_ПоискВГлубинуВызовСервере)
Дерево = <<?>>_dl_ПоискВГлубинуВызовСервере.ПолучитьДерево(Истина, КонфигурационнаяЕдиница); (Проверка: Сервер)
+ – Ответить
Для отправки сообщения требуется регистрация/авторизация