При проектировании пользовательских интерфейсов в 1С разработчики иногда сталкиваются с нестандартными и очень специфическими требованиями технического задания (ТЗ). Одно из таких требований — кастомизация внешнего вида табличной части или таблицы значений на управляемой форме. Например, когда необходимо задать яркий (допустим, синий или голубой) фон для таблицы значений, а границы между ячейками (сетку) сделать контрастными — например, белыми.
На первый взгляд задача кажется тривиальной, ведь у элементов управляемой формы есть свойства цвета фона и цвета рамки. Однако при попытке реализовать это стандартными средствами разработчики неизбежно сталкиваются с ограничениями платформы. В этой статье мы подробно разберем, почему стандартные механизмы настройки цвета рамок не работают для обычных таблиц управляемых форм, и рассмотрим альтернативные, полностью рабочие архитектурные решения этой задачи.
Давайте проанализируем поведение платформы 1С:Предприятие 8.3 при попытке настроить рамки таблицы значений стандартными методами:
ГоризонтальныеЛинии и ВертикальныеЛинии представляют собой обычные булевы флаги (включено/выключено). Цвет этих линий жестко зашит в системной схеме оформления платформы. В интерфейсе «Такси» этот цвет обычно светло-серый, и платформа не предоставляет прямого программного или интерактивного доступа для его изменения.ЦветРамки у элемента формы типа «Таблица» или у конкретной «Колонки таблицы», то заметите, что цвет меняется только у внешней границы всей таблицы либо подсвечивает рамку вокруг текущей активной (выделенной) ячейки. Для обычных, неактивных ячеек этот цвет полностью игнорируется платформой, и они продолжают отображаться со стандартной системной сеткой.ТабличныйДокумент (например, отчетов или печатных форм). При применении условного оформления к обычной таблице формы эти свойства просто игнорируются движком рендеринга платформы.Таким образом, стандартными свойствами управляемой формы решить задачу «голубой фон и белая сетка ячеек» напрямую невозможно. Давайте разберем обходные пути (костыли и полноценные альтернативные решения), которые используют профессиональные разработчики для обхода этого ограничения платформы.
Если требования ТЗ по дизайну являются строго обязательными и компромиссы не допускаются, наилучшим решением будет полный отказ от стандартного элемента формы «Таблица» в пользу элемента ПолеHTMLДокумента. Этот подход позволяет использовать всю мощь верстки HTML и стилей CSS для кастомизации интерфейса.
Давайте разберем по шагам, как реализовать этот метод:
Шаг 1. Создание реквизита на форме. Создадим реквизит формы с именем АдресТаблицыHTML и типом данных Строка. Вытащим его на форму и установим вид элемента — Поле HTML-документа.
Шаг 2. Программная генерация HTML-кода таблицы. Напишем процедуру, которая будет преобразовывать нашу таблицу значений в полноценный HTML-код с прописанными стилями CSS. Обратите внимание, как мы задаем синий фон и белые рамки для ячеек.
&НаСервере
Процедура СформироватьТаблицуHTML()
// Исходная Таблица Значений (для примера)
ТЗ = Новый ТаблицаЗначений;
ТЗ.Колонки.Добавить("Номенклатура", Новый ОписаниеТипов("Строка"));
ТЗ.Колонки.Добавить("Количество", Новый ОписаниеТипов("Число"));
ТЗ.Колонки.Добавить("Цена", Новый ОписаниеТипов("Число"));
// Заполним тестовыми данными
НоваяСтрока = ТЗ.Добавить();
НоваяСтрока.Номенклатура = "Кабель силовой";
НоваяСтрока.Количество = 10;
НоваяСтрока.Цена = 150;
НоваяСтрока = ТЗ.Добавить();
НоваяСтрока.Номенклатура = "Выключатель автоматический";
НоваяСтрока.Количество = 5;
НоваяСтрока.Цена = 450;
// Начинаем сборку HTML-строки
HTML = "<html><head>";
HTML = HTML + "<style>";
HTML = HTML + "body { background-color: #f4f4f4; margin: 0; padding: 10px; font-family: Arial, sans-serif; }";
HTML = HTML + "table { border-collapse: collapse; width: 100%; background-color: #4a90e2; }"; // Голубой фон таблицы
HTML = HTML + "th { background-color: #357abd; color: #ffffff; padding: 8px; border: 2px solid #ffffff; text-align: left; }"; // Шапка с белой рамкой
HTML = HTML + "td { padding: 8px; border: 2px solid #ffffff; color: #ffffff; }"; // Ячейки с белой рамкой и белым текстом
HTML = HTML + "</style></head><body>";
HTML = HTML + "<table>";
// Формируем шапку
HTML = HTML + "<tr>";
Для Каждого Колонка Из ТЗ.Колонки Цикл
HTML = HTML + "<th>" + Колонка.Имя + "</th>";
КонецЦикла;
HTML = HTML + "</tr>";
// Формируем строки данных
Для Каждого СтрокаТЗ Из ТЗ Цикл
HTML = HTML + "<tr>";
HTML = HTML + "<td>" + СтрокаТЗ.Номенклатура + "</td>";
HTML = HTML + "<td style='text-align: right;'>" + СтрокаТЗ.Количество + "</td>";
HTML = HTML + "<td style='text-align: right;'>" + СтрокаТЗ.Цена + "</td>";
HTML = HTML + "</tr>";
КонецЦикла;
HTML = HTML + "</table></body></html>";
// Записываем результат в реквизит формы
АдресТаблицыHTML = HTML;
КонецПроцедуры
Преимущества метода HTML: Абсолютная свобода стилизации. Вы можете задавать любые рамки (толщину, стиль dashed, dotted, solid), настраивать градиенты, тени, анимации при наведении мыши и любые другие CSS-эффекты.
Сложности метода HTML: Интерактивность усложняется. Если пользователю нужно редактировать данные прямо в таблице, вам придется писать обработчики событий JavaScript внутри HTML-кода и связывать их с платформой 1С через событие ПриНажатии поля HTML-документа.
Если вам по-прежнему нужен мощный инструмент 1С для работы с ячейками, но стандартная сетка таблицы управляемой формы не подходит, отличной альтернативой станет использование элемента ПолеТабличногоДокумента.
В отличие от обычных таблиц управляемых форм, табличный документ обладает колоссальными возможностями форматирования ячеек и их границ непосредственно через встроенный язык 1С.
Рассмотрим пример программной генерации такой таблицы:
&НаСервере
Процедура СформироватьТабличныйДокументНаФорме()
// Получаем доступ к реквизиту формы типа "ТабличныйДокумент"
ТабДок = РеквизитФормыВЗначение("ТабличныйДокументНаФорме");
ТабДок.Очистить();
// Создаем стили для линий (белая сплошная линия средней толщины)
БелаяЛиния = Новый Линия(ТипЛинииЯчейкиТабличногоДокумента.Сплошная, 2);
ЦветБелый = Новый Цвет(255, 255, 255);
ЦветГолубойФон = Новый Цвет(74, 144, 226);
// Заполняем шапку таблицы
ТабДок.Область("R1C1").Текст = "Товар";
ТабДок.Область("R1C2").Текст = "Остаток";
// Оформляем шапку
Шапка = ТабДок.Область("R1C1:R1C2");
Шапка.ЦветФона = Новый Цвет(53, 122, 189);
Шапка.ЦветТекста = ЦветБелый;
Шапка.Шрифт = Новый Шрифт(Шапка.Шрифт, , , Истина); // Жирный шрифт
// Настраиваем рамку для каждой ячейки шапки
Для Кол = 1 По 2 Цикл
Ячейка = ТабДок.Область(1, Кол);
Ячейка.Обвести(БелаяЛиния, БелаяЛиния, БелаяЛиния, БелаяЛиния);
КонецЦикла;
// Заполняем строки данными
Для СтрокаИндекс = 1 По 5 Цикл
НомСтроки = СтрокаИндекс + 1;
ТабДок.Область(НомСтроки, 1).Текст = "Товар пример №" + СтрокаИндекс;
ТабДок.Область(НомСтроки, 2).Текст = СтрокаИндекс * 10;
// Применяем стили оформления к ячейкам данных
Для Кол = 1 По 2 Цикл
Ячейка = ТабДок.Область(НомСтроки, Кол);
Ячейка.ЦветФона = ЦветГолубойФон;
Ячейка.ЦветТекста = ЦветБелый;
// Установка белой рамки вокруг ячейки
Ячейка.ОкантовкаСлева = БелаяЛиния;
Ячейка.ЦветСлева = ЦветБелый;
Ячейка.ОкантовкаСправа = БелаяЛиния;
Ячейка.ЦветСправа = ЦветБелый;
Ячейка.ОкантовкаСверху = БелаяЛиния;
Ячейка.ЦветСверху = ЦветБелый;
Ячейка.ОкантовкаСнизу = БелаяЛиния;
Ячейка.ЦветСнизу = ЦветБелый;
КонецЦикла;
КонецЦикла;
// ЗначениеЗаписатьВРеквизитФормы
ЗначениеВРеквизитФормы(ТабДок, "ТабличныйДокументНаФорме");
КонецПроцедуры
Преимущества метода с Табличным Документом: Полный контроль над границами каждой отдельной ячейки средствами встроенного языка 1С без необходимости знать HTML/CSS. Поддерживается интерактивный ввод данных пользователем (при включении свойства ТолькоПросмотр = Ложь у табличного документа).
Сложности метода: Требуется писать больше кода для управления фокусом ввода, добавления и удаления строк, контроля типов данных при вводе пользователем.
Если бюджет или сроки разработки ограничены, самым разумным решением будет провести переговоры с заказчиком и объяснить ему архитектурные ограничения платформы 1С. В 95% случаев заказчик соглашается на компромиссные варианты, которые настраиваются стандартными галочками за 1 минуту:
ЧередованиеЦветовСтрок. Задайте два близких оттенка синего (например, основной синий и чуть более светлый сине-голубой). Это позволит строкам визуально отделяться друг друга даже при отсутствии ярко выраженной белой сетки.Подводя итог, можно утверждать: напрямую перекрасить сетку таблицы управляемой формы 1С в белый цвет стандартными свойствами невозможно. Но используя Поле HTML-документа или Табличный документ, вы сможете обойти это ограничение и реализовать интерфейс любого уровня сложности.