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

21.03.22

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

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

Скачать исходный код

Наименование Файл Версия Размер
Визуализация деревьев с функциональностью Drag&Drop:
.epf 48,35Kb
15
.epf 48,35Kb 15 Скачать

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

Согласно 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 и анализа измененных объектов:

 

 

См. также

Управление дашбордами

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

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

2400 руб.

29.06.2020    17196    23    4    

37

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    11684    776    elcoan    47    

108

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

Инструментарий разработчика Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    10218    157    acces969    31    

120

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

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

1 стартмани

05.07.2022    4211    kalyaka    4    

31

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

Работа с интерфейсом Платформа 1С v8.3 Платные (руб)

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

6000 руб.

18.01.2022    9111    1    2    

6

Программный интерфейс для доработки форм

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021    10018    AtamanovYS    19    

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

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

Можно подвесить их к одной вершине, например "Все конфигурационные единицы". Преимущество такого решения - комплектующие можно будет не просто перемещать внутри одной КЕ, но и "выводить из эксплуатации" (вешая на эту вершину).
2. cmax 106 25.04.22 18:30 Сейчас в теме
И еще вопрос - где меняется цвет? меняю значения в функции ЗаполнитьЗначенияПоУмолчанию - ЦветПлашек, ширина, высота и другие - ничего не меняется абсолютно в отображении..
4. farukshin 120 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 106 27.04.22 10:38 Сейчас в теме
(4) Спасибо за ответ! буду пробовать.
6. cmax 106 28.04.22 16:12 Сейчас в теме
(4) Получилось с цветами и размерами. Все отлично.
Вопрос еще возник, возможно ли сделать перевертыш - перевернуть дерево вниз корнем?
Есть понимание как это сделать, если вообще возможно?
Оставьте свое сообщение