Визуализация деревьев с функциональностью 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 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    62084    43    59    

81

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

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

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54678    16    21    

42

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

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

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

2400 руб.

29.06.2020    16902    22    4    

36

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

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

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

27.12.2023    11156    762    elcoan    45    

106

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

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

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

2 стартмани

10.04.2023    9883    153    acces969    31    

119

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

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

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

1 стартмани

05.07.2022    3937    kalyaka    4    

29

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12287    1    5    

10

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

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

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

6000 руб.

18.01.2022    8951    1    2    

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

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

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