Как реализовать красивое отображение дерева значений в виде блоков с поддержкой Drag-and-Drop

В стандартном интерфейсе 1С ДеревоЗначений чаще всего отображается в виде обычной иерархической таблицы. Однако для конечного пользователя такая подача информации не всегда наглядна, особенно когда речь идет о сложных структурах, таких как организационные диаграммы, карты процессов или структуры подчиненности документов. В этой статье мы подробно рассмотрим, как выйти за рамки стандартных таблиц и реализовать по-настоящему интерактивный и "красивый" интерфейс для работы с иерархией.

Стандартные возможности и их ограничения

Прежде чем переходить к сложным интеграциям, проанализируем, что предлагает платформа "из коробки". Стандартный элемент управления Таблица с типом ДеревоЗначений поддерживает автоматическое построение иерархии и механизм Drag-and-Drop (перетаскивание строк). Это надежное решение, но оно ограничено строго табличным видом: мы не можем произвольно располагать узлы, рисовать между ними сложные линии связи или менять форму блоков.

Если ваша задача — создать интерфейс, похожий на блок-схему (так называемый "блочный вид"), нам потребуется задействовать альтернативные механизмы. Разберем наиболее эффективные способы реализации по шагам.

Метод 1: Использование поля HTML-документа и JavaScript-библиотек

Это наиболее гибкий путь, который позволяет превратить форму 1С в современное веб-приложение. Суть метода заключается в использовании элемента формы ПолеHTMLДокумента. Для изучения практики перетаскивания объектов на форме подойдёт пример реализации Drag-and-Drop средствами HTML и JavaScript.

Рассмотрим алгоритм реализации:

1. Подготовим данные в 1С: преобразуем наше ДеревоЗначений в строку JSON.
2. Встроим в HTML-код специализированную библиотеку для отрисовки графов. Наиболее популярные варианты:
   • D3.js: мощнейший инструмент для любых визуализаций.
   • OrgChart: специализированная библиотека для оргсхем с поддержкой перетаскивания блоков.
   • JointJS: отлично подходит для интерактивных схем со связями.
3. Настроим взаимодействие между 1С и JavaScript.

Для передачи данных из 1С в HTML мы можем использовать метод ВыполнитьScript(). А для обратной связи (например, при завершении перетаскивания блока в браузере) используем механизм внешних событий или PostMessage (в новых версиях платформы).

Пример подготовки JSON-данных для передачи в скрипт:

Функция ДеревоВJSON(УзелДерева)
    ДанныеУзла = Новый Структура;
    ДанныеУзла.Вставить("name", УзелДерева.Наименование);
    ДанныеУзла.Вставить("id", УзелДерева.Идентификатор);
    
    МассивДетей = Новый Массив;
    Для Каждого СтрокаПодчиненная Из УзелДерева.Строки Цикл
        МассивДетей.Добавить(ДеревоВJSON(СтрокаПодчиненная));
    КонецЦикла;
    
    ДанныеУзла.Вставить("children", МассивДетей);
    Возврат ДанныеУзла;
КонецФункции

Метод 2: Программная работа с Графической схемой

Мало кто знает, что стандартный объект 1С ГрафическаяСхема (который мы привыкли видеть в бизнес-процессах) можно использовать для визуализации произвольных данных. Этот объект поддерживает Drag-and-Drop на уровне платформы.

Выясним, как построить дерево на графической схеме программно:

1. Создаем объект ГрафическаяСхема.
2. Для каждого узла дерева создаем ЭлементГрафическойСхемы типа Декорация или Действие.
3. Для визуализации иерархии программно рисуем Линии, соединяющие родительские и дочерние блоки.

Проанализируем пример добавления блока на схему:

ЭлементСхемы = Схема.Объекты.Добавить(Тип("ДекорацияГрафическойСхемы"));
ЭлементСхемы.Текст = "Новый узел дерева";
ЭлементСхемы.Лево = 100;
ЭлементСхемы.Верх = 50;
ЭлементСхемы.Ширина = 150;
ЭлементСхемы.Высота = 60;

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

Метод 3: Использование механизмов типовых решений (Структура подчиненности)

В конфигурациях вроде 1С:ERP или 1С:Документооборот реализован механизм "Структура подчиненности". Если ваша задача — отобразить дерево документов или объектов, мы рекомендуем изучить код общей формы СтруктураПодчиненности. Для реализации подобной функциональности можно использовать расширенную форму структуры подчиненности для документов и справочников.

Обычно это реализуется через ТабличныйДокумент. Рассмотрим, как это работает:

• Программа рассчитывает координаты блоков в зависимости от уровня вложенности.
• В ячейки табличного документа выводятся текстовые данные и рамки.
• Линии связи рисуются либо с помощью специальных символов, либо через графические объекты (рисунки) поверх таблицы.

Хотя Drag-and-Drop в табличном документе реализовать сложнее, этот метод идеально подходит для статической визуализации "красивых" отчетов по структуре дерева.

Метод 4: Адаптация Диаграммы Ганта

Иногда для иерархического отображения используют объект ДиаграммаГанта. Посмотрим на ситуацию под другим углом: левая часть диаграммы — это готовое дерево значений, а правая — графические блоки на временной шкале. Если "время" в вашем случае не критично, вы можете использовать правое поле для визуального представления состояния узлов, их длительности или других параметров. Диаграмма Ганта поддерживает перетаскивание интервалов, что может имитировать интерактивную работу с деревом.

Реализация Drag-and-Drop в нестандартных решениях

Если вы выбрали путь с использованием HTML, ключевым моментом станет синхронизация изменений. Рассмотрим алгоритм обновления данных:

1. Пользователь перемещает блок в HTML-поле.
2. Скрипт библиотеки (например, onDrop в D3.js) перехватывает событие.
3. Скрипт формирует сообщение, содержащее ID_перетаскиваемого_узла и ID_нового_родителя.
4. Сообщение передается в 1С. В обработчике события 1С мы находим соответствующие строки в объекте ДеревоЗначений и меняем их родителя.

Для обновления формы в 1С используйте следующий подход:

&НаКлиенте
Процедура ПолеHTMLДокументаПриНажатии(Элемент, ДанныеСобытия)
    // Обработка данных, полученных из JS
    Если ДанныеСобытия.ИмяСобытия = "NodeMoved" Тогда
        ОбновитьИерархиюНаСервере(ДанныеСобытия.NodeID, ДанныеСобытия.NewParentID);
    КонецЕсли;
КонецПроцедуры

Подведение итогов

Выбор метода зависит от ваших приоритетов. Если важна максимальная "красота" и современный UX — выбирайте HTML/JavaScript. Если нужно быстрое решение в рамках экосистемы 1С — используйте Графическую схему. Для простых задач визуализации структуры часто достаточно доработки Табличного документа по аналогии с типовыми конфигурациями.

Создание визуально приятного дерева значений требует усилий по расчету координат и отрисовке связей, но результат значительно повышает удобство работы пользователя с данными.