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

В отличие от простых табличных документов, иерархическое представление требует настройки специфических свойств объекта на форме. Необходимо правильно определить параметры вывода, настроить отбор и реализовать удобную навигацию для пользователя. В этой статье мы детально разберем процесс создания поля на управляемой форме, напишем код на встроенном языке и рассмотрим тонкости обработки событий.

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

Подготовка структуры данных в модуле

Первым этапом реализации является формирование самого объекта данных. Вы не можете вывести на форму пустую оболочку; сначала нужно создать структуру в памяти. Для этого в модуле формы или в модуле объекта (в зависимости от архитектуры вашего решения) создается переменная типа ДеревоЗначений.

Структура дерева определяется набором колонок. Каждая колонка имеет свой тип данных, заголовок и ширину. Важно заранее продумать, какие именно данные будут отображаться: это могут быть ссылки на справочники, строковые описания, числовые показатели или даты. Неправильно заданный тип данных в колонке может привести к ошибкам при заполнении.

Рассмотрим пример создания простого дерева с двумя колонками: "Наименование" и "Сумма". Мы используем метод Колонки.Добавить для определения схемы. Обратите внимание, что имя колонки в коде не должно содержать пробелов, хотя заголовок для пользователя может быть любым.

Дерево = Новый ДеревоЗначений;

Дерево.Колонки.Добавить("Наименование", Строка(50), "Наименование");

Дерево.Колонки.Добавить("Сумма", Число(15, 2), "Сумма, руб.");

После объявления колонок необходимо наполнить дерево узлами. Это делается через создание новых строк в корне или вложенных строках внутри существующих узлов. Метод Строки.Добавить() возвращает ссылку на новую строку, что позволяет сразу же заполнять её значениями или добавлять в неё потомков.

💡

Используйте свойство "Порядок" у колонок, если вам нужно изменить визуальный порядок отображения полей на форме без переписывания кода заполнения.

Размещение поля на управляемой форме

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

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

  • 📂 Убедитесь, что свойство Режим у поля установлено в значение Дерево, если вы используете универсальное табличное поле.
  • 👁️ Проверьте видимость колонок: в свойствах поля можно скрыть технические колонки, которые не нужны пользователю, но используются для сортировки.
  • 🔒 Настройте права доступа: если дерево содержит чувствительные данные, используйте условное оформление для скрытия значений.

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

📊 Какой тип данных чаще всего вы выводите в дерево?
Справочники
Числовые показатели
Строки
Булевы значения

Настройка отображения иерархии

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

Особое внимание стоит уделить свойству ОтображатьИерархию. Если оно отключено, дерево превратится в плоский список, что может сбить пользователя с толку. Также важно настроить начальный уровень раскрытия. Например, для глубоких структур имеет смысл раскрывать только первые два уровня при загрузке формы, чтобы не перегружать интерфейс.

⚠️ Внимание: При отображении очень глубоких деревьев (более 10-15 уровней вложенности) производительность отрисовки может снижаться. Рекомендуется ограничивать глубину вывода или использовать постраничную загрузку данных.

Для улучшения восприятия можно использовать условное оформление. Например, выделить жирным шрифтом итоговые строки или покрасить ячейки с отрицательными значениями в красный цвет. Это делается через коллекцию УсловноеОформление в свойствах поля или программно в обработчике ПриСозданииНаСервере.

ЭлементФормы.УсловноеОформление.Элементы.Добавить(Новый КомпоновщикМакетаУсловногоОформленияЭлементДанные("Сумма"));

ЭлементФормы.УсловноеОформление.Элементы[0].УсловноеОформление.Цвет.Цвет = Цвет(255, 0, 0);

Как изменить иконку узла?

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

Заполнение дерева данными из запроса

В реальных задачах данные редко создаются вручную, как в первом примере. Чаще всего источник информации — это результат выполнения запроса к базе данных. Чтобы вывести данные запроса в дерево, необходимо правильно сопоставить поля запроса с колонками дерева значений.

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

Поле запроса Колонка дерева Тип данных Описание
Ссылка Наименование СправочникСсылка Основной идентификатор
Родитель (Служебное) СправочникСсылка Для построения иерархии
Остаток Количество Число Количественный показатель
Цена Сумма Число Денежный показатель

Если структура данных в базе не является иерархической (например, плоский регистр сведений), вам придется программно группировать данные. В таком случае используется цикл по результатам запроса с проверкой условия: если текущая группа товаров изменилась, создаем новый узел-родитель, иначе добавляем строку в текущий узел.

💡

Метод ЗагрузитьДанные работает быстрее ручного цикла, но требует, чтобы данные в запросе были уже отсортированы в порядке, необходимом для построения дерева.

Обработка событий и взаимодействие с пользователем

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

В обработчике события вы получаете параметр СтрокаДерева, который содержит все данные выбранной строки. Это позволяет избежать лишних обращений к базе данных, так как вся необходимая информация уже находится в памяти формы. Используйте свойство ТекущиеДанные для доступа к значениям ячеек.

Также полезно обрабатывать событие НачалоВыбора, если вы хотите предложить пользователю список значений для ввода в поле, основанный на структуре дерева. Это стандартный паттерн для полей ввода с выбором (InputField), связанных со справочниками.

⚠️ Внимание: Не выполняйте тяжелые запросы к базе данных внутри обработчика ПриИзменении или ПриВыборе. Это приведет к зависанию интерфейса при каждом клике. Выносите тяжелую логику на сервер или выполняйте её асинхронно.

Для реализации контекстного меню (правый клик по строке) используйте команду формы с параметром Использование равным Надстройка. В обработчике команды проверяйте текущую выделенную строку дерева и выполняйте нужное действие: удаление, копирование или экспорт.

☑️ Проверка интерактивности

Выполнено: 0 / 1

Оптимизация производительности при работе с большими объемами

Когда количество строк в дереве превышает несколько тысяч, начинают проявляться проблемы с производительностью. Отрисовка такого объема данных на клиенте может занимать заметное время. Ключевым решением здесь является ленивая загрузка (Lazy Loading).

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

Еще один важный аспект — отключение обновления экрана во время массового заполнения. Используйте метод НачатьИзменениеДанных перед циклом заполнения и ЗакончитьИзменениеДанных после него. Это предотвратит многократную перерисовку формы на каждом шаге цикла.

ЭлементФормы.НачатьИзменениеДанных();

// ... цикл заполнения дерева ...

ЭлементФормы.ЗакончитьИзменениеДанных();

Помните, что передача больших объектов ДеревоЗначений между клиентом и сервером также consumes ресурсы. Старайтесь формировать дерево сразу на том месте, где оно будет использоваться, или передавайте только необходимые срезы данных.

Как очистить дерево перед новой загрузкой?

Для очистки используйте метод Строки.Очистить(). Это удалит все узлы, но сохранит структуру колонок. Если нужно изменить и структуру колонок, создавайте новый объект Новый ДеревоЗначений.

Можно ли сортировать строки в дереве программно?

Да, метод Строки.Сортировать() позволяет задать порядок строк. Однако, если включено отображение иерархии, сортировка применяется только в пределах одного уровня вложенности.

Как получить выделенную строку в коде?

Используйте свойство элемента формы ТекущиеДанные. Оно возвращает строку дерева значений, которая сейчас активна. Пример: ВыбраннаяСтрока = ЭлементыФормы.ДеревоНоменклатуры.ТекущиеДанные.

Влияет ли использование дерева на скорость открытия формы?

Да, если дерево заполняется при открытии формы большим количеством данных. Рекомендуется заполнять его по требованию или использовать фоновые задания для подготовки данных.

Можно ли редактировать данные прямо в дереве?

Да, если свойство ТолькоПросмотр установлено в Ложь, а у колонок разрешено редактирование. Изменения сразу попадают в объект ДеревоЗначений, но для сохранения в базу нужна отдельная процедура записи.