Отображение дерева значений в поле HTML-документа с помощью библиотеки vis.js

26.12.23

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

В обработке реализован вариант работы с библиотекой vis.js для вывода дерева значений в поле HTML-документа. Можно использовать в качестве основы для реализации своих задач, связанных с визуализацией графов (дерево является частным случаем графа).

Скачать файл

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

Наименование По подписке [?] Купить один файл
Отображение дерева значений в поле HTML-документа с помощью библиотеки vis.js:
.epf 170,29Kb
10
10 Скачать (1 SM) Купить за 1 850 руб.

Код обработки довольно лаконичен.

Узлы и ребра графа задаются в структурах, которые методами 1С сериализуются в объекты JSON.

&НаСервереБезКонтекста
Функция GetJSON(Данные)
	
	//Данные - массив структур (узлы или ребра)
		
	ЗаписьJSON = Новый ЗаписьJSON;			
	ЗаписьJSON.УстановитьСтроку();
	ЗаписатьJSON(ЗаписьJSON, Данные);			
	Возврат ЗаписьJSON.Закрыть();  
	
КонецФункции
//...
	Для Каждого Стр Из Строки Цикл
		Узлы.Добавить(Новый Структура("id, label, shape, level", Стр.id, Стр.Наименование + Символы.ПС + "(index: " + Стр.id + ")", "box", Стр.Уровень()));
		
		Если НЕ Стр.Родитель = Неопределено Тогда
			Ребра.Добавить(Новый Структура("id, from, to, arrows, label", id, Стр.Родитель.id, Стр.id, "to", Строка(id)));
			id = id + 1;
		КонецЕсли;
		
		ДанныеСтрок(Стр.Строки, Узлы, Ребра, id);
	КонецЦикла;
//...

HTML = СтрШаблон(ТекстHTML, GetJSON(УзлыИРебра.Узлы), GetJSON(УзлыИРебра.Ребра), Скрипт());

Библиотека предоставляет возможности довольно гибкой настройки вывода узлов и ребер, а также дополнительных параметров: физики движения, перетаскивания и т.п.

Поддерживается обработка событий - щелчок, двойной щелчок, выделение и т.п. - в обработке это не реализовано, т.к., несколько выходит за рамки задачи, и чтобы не усложнять код.

Также библиотекой поддерживается импорт параметров графа в формате dot.

Документация к библиотеке и примеры доступны на официальном сайте: https://visjs.org/

Обработка тестировалась на платформе 8.3.22.2283.

Проверено на следующих конфигурациях и релизах:

  • Управление торговлей, редакция 11, релизы 11.5.15.69

обработка дерево визуализация vis.js

См. также

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

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

6000 руб.

16.01.2015    62985    44    59    

82

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

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

2400 руб.

29.06.2020    18854    26    6    

41

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

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

1500 руб.

06.10.2020    10224    7    7    

10

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

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

20.08.2024    16796    mrXoxot    43    

121

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

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

27.05.2024    7349    smielka    37    

100

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

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

27.12.2023    14787    913    elcoan    47    

117

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

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

2 стартмани

10.04.2023    11913    162    acces969    31    

124
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. dimanich70 870 02.04.24 09:10 Сейчас в теме
Отлично работает.
А можешь до кучи выложить для 3D и 2D графиков тоже шаблоны?
2. dimanich70 870 02.04.24 09:24 Сейчас в теме
В этой своей теме https://infostart.ru/1c/articles/2060696/ допилил вывод дерева - просто супер смотрится.
Прикрепленные файлы:
3. Evgeniy 106 22.04.24 14:42 Сейчас в теме
для работы с библиотекой требуется доступ к интернету?
4. le_ 243 10.07.24 11:45 Сейчас в теме
(3) Не обязательно. В предлагаемой обработке реализовано хранение скрипта библиотеки в макете.
Но, при желании, можно обращаться [к последней версии] и через интернет.
Оставьте свое сообщение