Таблица значений в Таблицу HTML - функция с возможностью настройки цвета шапки, заголовков, выравнивания и размера колонок

Программирование - Практика программирования

Таблица значений Таблица HTML HTML

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

 

Добрый день, Коллеги!

Возникла необходимость формировать программно таблицы значений в таблицы HTML в виде строкового типа 1С, нашел готовый вариант функции: //catalog.maxima.pro/public/174149/ но не подошла.

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

Так же данную функцию можно считать дополнением к моей публикации - Массовая рассылка писем в формате HTML

Ещё хочется отметить, что с помощью параметра можно вывести первую колонку "пункт по порядку", который часто необходим.

Функция ТаблицаЗначенийВТаблицуХТМЛ(ТабЗначений,СтруктураПараметрыТаблицыХТМЛ = Неопределено) Экспорт
	
	//СтруктураПараметрыТаблицыХТМЛ
	//
	//Общие параметры:
	//СтруктураПараметрыТаблицыХТМЛ.ШиринаТаблицы - общая ширина таблица
	//СтруктураПараметрыТаблицыХТМЛ.ЦветШапки - цвет шапки таблицы пример "eadbaf"
	//СтруктураПараметрыТаблицыХТМЛ.ПунктПорядкуИспользуется - по умолчанию ЛОЖЬ
	//
	//Индивиуальные для каждой колонки:
	//СтруктураПараметрыТаблицыХТМЛ.Заголовок1 - заголовок для первой колонки, цифра на конце обознает номер колонки (не с нуля)
	//СтруктураПараметрыТаблицыХТМЛ.Ширина1 - ширина для первой колонки, цифра на конце обознает номер колонки (не с нуля)
	//СтруктураПараметрыТаблицыХТМЛ.Положение1 - отвечает за положение текста в колонке (по умол. лево), передовать "center" или "right"
	
	//ТабЗначений = Новый ТаблицаЗначений;
	МассивИменКолонок = Новый Массив;
	
	Если ТипЗнч(СтруктураПараметрыТаблицыХТМЛ) <> Тип("Структура") Тогда
		СтруктураПараметрыТаблицыХТМЛ = Новый Структура;
	КонецЕсли;
				
	КоличествоКолонок = ТабЗначений.Колонки.Количество();
	ПунктПорядкуИспользуется = ?(СтруктураПараметрыТаблицыХТМЛ.Свойство("ПунктПорядкуИспользуется"),СтруктураПараметрыТаблицыХТМЛ.ПунктПорядкуИспользуется,ЛОЖЬ);	
	
	Если КоличествоКолонок < 0 Тогда
		Возврат Неопределено;
	КонецЕсли;
			
	ЦветШапки = ?(СтруктураПараметрыТаблицыХТМЛ.Свойство("ЦветШапки")," bgcolor=""#" + СтруктураПараметрыТаблицыХТМЛ.ЦветШапки + """","");
	ШиринаТаблицы = ?(СтруктураПараметрыТаблицыХТМЛ.Свойство("ШиринаТаблицы")," style=""width:" + СтруктураПараметрыТаблицыХТМЛ.ШиринаТаблицы + "px""",""); 
	ТаблицаХТМЛ = "<table border=""1"" cellpadding=""1"" cellspacing=""0"" " + ШиринаТаблицы + ">
				|<tbody>
				|<tr>";
	
	//Первым выводим столбик П/П если он задан в шапку
	Если ПунктПорядкуИспользуется Тогда
		ТаблицаХТМЛ = ТаблицаХТМЛ + "
				|<td" + ЦветШапки + " style=""width:30px"" align=""center"">п/п</td>";	
	КонецЕсли;
	
	//Формируем шапку
	Для Счетчик = 1 по КоличествоКолонок Цикл
		ИмяСвойстваШирина = "Ширина" + Счетчик;
		ШиринаСтолбца = ?(СтруктураПараметрыТаблицыХТМЛ.Свойство(ИмяСвойстваШирина)," style=""width:" + СтруктураПараметрыТаблицыХТМЛ[ИмяСвойстваШирина] + "px""","");
		ИмяКолонки = ТабЗначений.Колонки[Счетчик-1].Имя;
		ИмяСвойстваЗаголовок = "Заголовок" + Счетчик;
		ЗаголовокКолонки = ?(СтруктураПараметрыТаблицыХТМЛ.Свойство(ИмяСвойстваЗаголовок),СтруктураПараметрыТаблицыХТМЛ[ИмяСвойстваЗаголовок],ИмяКолонки);
		ТаблицаХТМЛ = ТаблицаХТМЛ + " 
				|<td" + ЦветШапки + ШиринаСтолбца + " align=""center"">" + ЗаголовокКолонки + "</td>";	
		МассивИменКолонок.Добавить(ИмяКолонки);
	КонецЦикла;
	ТаблицаХТМЛ = ТаблицаХТМЛ + "
				|</tr>";
	
	//Заполняем таблицу	
	ПунктПорядку = 0;
	Для каждого СтрокаТаблицы Из ТабЗначений Цикл
		ПунктПорядку = ПунктПорядку + 1;
		ТаблицаХТМЛ = ТаблицаХТМЛ + "
				|<tr>" + ?(ПунктПорядкуИспользуется, Символы.ПС + "<td align=""center"">" + ПунктПорядку + "</td>","") + "";
		Для Счетчик = 0 по КоличествоКолонок - 1 Цикл
			ИмяСвойстваПоложение = "Положение" + Строка(Счетчик + 1);
			Положение = " align=""" + ?(СтруктураПараметрыТаблицыХТМЛ.Свойство(ИмяСвойстваПоложение),СтруктураПараметрыТаблицыХТМЛ[ИмяСвойстваПоложение],"left") + """";
			ТаблицаХТМЛ = ТаблицаХТМЛ + "
				|<td " + Положение + ">" + СтрокаТаблицы[МассивИменКолонок[Счетчик]] + "</td>";			
		КонецЦикла;				
		ТаблицаХТМЛ = ТаблицаХТМЛ + "
				|</tr>";
	КонецЦикла;	
	
	ТаблицаХТМЛ = ТаблицаХТМЛ + " 
				|</tbody>
				|</table>";
	
	Возврат ТаблицаХТМЛ;

КонецФункции

 

Пример использования #1 - Формируем страничку HTML

Демонстрация работы приводиться на моей конфигурации Тренажер для тестирования (удобно использоваться для подготовки к профессионалу и не только).

Код обработки с заданием ряда параметров для будущей таблицы HTML. Создается готовый 1.html файл на диске, в котором содержится искомая таблица.

&НаКлиенте
Процедура ЧтоТоСделать(Команда)
	КодСтраницыХТМЛ = "<html><BODY>" + Символы.ПС + ПолучитьТаблицуХТМЛ() + Символы.ПС + "</BODY></html>";
	ТекстовыйДокумент = Новый ТекстовыйДокумент;
	ТекстовыйДокумент.УстановитьТекст(КодСтраницыХТМЛ);
	ТекстовыйДокумент.НачатьЗапись(,"C:\public\1.html","windows-1251");	
КонецПроцедуры

&НаСервереБезКонтекста
Функция ПолучитьТаблицуХТМЛ()
	Запрос = Новый Запрос;
	Запрос.Текст = "ВЫБРАТЬ
	               |	котВопросы.Курс КАК Курс,
	               |	котВопросы.Раздел КАК Раздел,
	               |	котВопросы.НомерВопроса КАК НомерВопроса,
	               |	котВопросы.Вопрос КАК Вопрос,
	               |	котВопросы.НаличиеКартинки КАК НаличиеКартинки,
	               |	котВопросы.НомерВерногоОтвета КАК НомерВерногоОтвета
	               |ИЗ
	               |	РегистрСведений.котВопросы КАК котВопросы";
	
	ТаблицаЗначений = Запрос.Выполнить().Выгрузить();
	Параметры = Новый Структура;
	Параметры.Вставить("ПунктПорядкуИспользуется",ИСТИНА);
	Параметры.Вставить("ШиринаТаблицы","800");
	Параметры.Вставить("ЦветШапки","eadbaf");
	Параметры.Вставить("Ширина3","300");
	Параметры.Вставить("Положение2","center");
	Параметры.Вставить("Положение3","center");
	Параметры.Вставить("Положение6","center");
	Параметры.Вставить("Заголовок3","Номер вопроса");	
	Параметры.Вставить("Заголовок5","Наличие картинки");
	Параметры.Вставить("Заголовок6","Правильный ответ");
	ТаблицаХТМЛ = ТаблицаЗначенийВТаблицуХТМЛ(ТаблицаЗначений,Параметры);
	Возврат ТаблицаХТМЛ; 
КонецФункции

Результат работы выше написанного кода:

 

Пример использования #2 - Отправляем таблицу HTML в электронном письме

Но прямое использование породившее функцию для уведомлений по почте в теле HTML сообщения электронной почты:

 

Удачного кодинга!

 

61

См. также

Специальные предложения

Комментарии
Избранное Подписка Сортировка: Древо
1. smirnov.es 15 22.12.17 10:43 Сейчас в теме
А если просто готовый макет сохранить в HTML?
3. rpgshnik 909 22.12.17 19:39 Сейчас в теме
(1) т.е. создать макет, но ведь не удобнее его потом редактировать и динамически влиять на цветовую палитру таблицы и т.п. либо я не понял)
2. ArchLord42 62 22.12.17 12:23 Сейчас в теме
ухх. какой спагетти-код

Можно сделать так:


//Шаблон, лежит например в макете

<!DO CTYPE html>
<ht ml>
<head>
	<title>my table</title>
</head>
<body>
	<table st yle="width: {{ Параметры.ШиринаТаблицы }}px; height: {{ Параметры.ВысотаТаблицы }}px;">
		<thead>
			<tr bgcolor="{{ Параметры.ЦветШапки }}">
				{% Для Каждого Колонка ИЗ Параметры.ТЗ.Колонки Цикл %}
				<td>{{ Колонка.Имя }}</td>
				{% КонецЦикла; %}
			</tr>
		</thead>
		<tbody>
			{% Для Каждого СтрокаТЗ ИЗ Параметры.ТЗ Цикл %}
			<tr>
				{% Для Каждого Колонка ИЗ Параметры.ТЗ.Колонки Цикл %}
				<td>{{ СтрокаТЗ[Колонка.Имя] }}</td>
				{% КонецЦикла; %}
			</tr>
			{% КонецЦикла; %}
		</tbody>
	</table>
</body>
</html>

//Фунция выводить любую таблицу значений в HTML
Функция ВывестиЛюбуюТаблицуВHTML(ТЗ, ШиринаТаблицы = Неопределено, ДлинаТаблицы = Неопределено, ЦветШапки = Неопределено)
	Шаблон = ПолучитьШаблонВывода(); //Получаем шаблон, см.выше

	ДлинаТаблицы  = ?(ДлинаТаблицы = Неопределено, "1000", ДлинаТаблицы);
	ШиринаТаблицы = ?(ШиринаТаблицы = Неопределено, "500", ШиринаТаблицы);
	ЦветШапки 	  = ?(ЦветШапки = Неопределено, "#FFF", ЦветШапки);

	Возврат Шаблонизатор.СкомпилироватьШаблон(Шаблон, Новый Структура("ТЗ, ШиринаТаблицы, ВысотаТаблицы, ЦветШапки", ТЗ, ШиринаТаблицы, ДлинаТаблицы, ЦветШапки));

КонецФункции

Показать


Если заинтересовало, то прошу https://infostart.ru/public/549791/ :)

Кстати можно пойти более 1Сным путем и вывести ТЗ через СКД, где все можно настроить визуально и ТД потом в HTML конвертнуть.

Имхо такой код очень сложно поддерживать.
echo77; DrAku1a; A_Max; VladimirL; kote; +5 Ответить
4. rpgshnik 909 22.12.17 19:51 Сейчас в теме
(2) интересно ваше предложение по коду в шаблоне (проверю как работает не сталкивался), но сама реализация в целом схожа, если использовать структуру то будет такая же лапша)) если вы об этом, а без структуры передавать все параметры в процедуры это будет треш может достичь такого ВывестиЛюбуюТаблицуВHTML(ТЗ,,,,,,"Договор контрагента",,,,,,"center",,,,ИСТИНА); Это же вообще будет не понятно что происходит)) К примеру центрируйте только 35-ую колонку, а 14 колонке заголовок "Договор контрагента".

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

Прямое использование - без интерфейсное - регламентными заданиями. В сфою функцию я просто передаю таблицу прямо из запроса, знаю какие колонки мне нужно написать с пробелом,какие колонки центрировать, а так же при необходимости п\п. Получаю ХТМЛ таблицу, вгоняю её в шаблон письма и письмо улетает))
6. MSK_Step 18 22.12.17 21:46 Сейчас в теме
Завуалированная реклама
(2)Без обид, но ваша статья слабовата, как демо какое то. Я не осилил с первого взгляда. Тут хоть развернут код, чтобы не тратить время на скачивание.
rpgshnik; +1 Ответить
5. ArchLord42 62 22.12.17 21:07 Сейчас в теме
ВывестиЛюбуюТаблицуВHTML(ТЗ,,,,,,"Договор контрагента",,,,,,"center",,,,ИСТИНА)

Функция была лишь простейшим примером, как можно убрать спагетти код вывода html заменив немного подход к его выводу.

На простых примерах преимущества шаблонизации вы можете и не разглядеть, но когда поработаете с html с >1k строк кода и кучей переменных, поймете всю боль веб программистов из 2006 года.
starik-2005; DrAku1a; +2 Ответить
7. rpgshnik 909 23.12.17 15:49 Сейчас в теме
(5) так мне не нужно работать с 1к мне нужен удобный и простой способ перегнать таблицу значений в строку 1с с кодом HTML таблицы.
Вы мне покажите как ваш шаблон и функция будет выглядит полностью сопоставив моей если это легче и удобнее.
8. fuxic 292 24.12.17 01:08 Сейчас в теме
Вам бы посоветовал азы, чтобы не выглядеть 1сником в чужом огороде.

Настройки шаблона / данные / шаблон должны быть разделены визуально и в коде - основы MVC.

Зачем смешивать мух и котлет - native стили вместо css в одном месте? Все оформления тоже лучше в общий style, например, та же шапка через элементы thead td:nth-child(n), тогда исходник с результатом будет легко читаться и меньше весить

И зачем супернастройки вместо того, чтобы дать выбрать из существующих css, которые делали профдизайнеры Bootstrap3/4, Flat, Material (1, 2), Metro, Office, W3CSS - не касаясь фремворков вокруг настоящих движков (ember, angular, vue, jquery, dojo, extjs, kendoUI)! Конкретные цвета лучше заменить абстракциями ("важно", "критично", "основное", "второстеменно") и дать запоминать

1-й класс HTML. Элементарные элементы стиля - рамку светлее (1сные рамки отнимают много внимания в любой версии), в td padding (дикость без отступов от бордеров жить), в шапке th вместо td, ширину 100% для адаптвной и для колонок лучше max-width. Веберы за шрифт Verdana вместо нового супер Roboto стрелять готовы, а тут TimeNewRomans :))) Добавьте еще настройку процента размера через transform: scale(90%) для удобства. Для красоты можете tr:hover. Но все это полная ерунда, когда все уже давно написано.
ZOMI; Rie; Gureev; rpgshnik; +4 Ответить
9. ArchLord42 62 24.12.17 09:24 Сейчас в теме
(8)
Пример использования #2 - Отправляем таблицу HTML в электронном письме

Если учесть тот факт, что автор (скорее всего) писал кроссвалидный код как для вывода страницы, так и для отпраки письма, то практически все ваши замечания становятся бессысленными.
CSiER; rpgshnik; +2 Ответить
10. fuxic 292 24.12.17 14:19 Сейчас в теме
Шаблонизаторы XSLD
(9)

Любой готовый css встраивается в письмо. Их размерам после углифай в *.min.css вы удивитесь))
Более того, можно экспортировать настройки только таблицы и бади.
Более того css вершина и изюминка, а самое интересное, если заняться js и заставить эту таблицу работать (тултипы, линки, свертки, меню)

И когда html, css, javascript, препроцессоры, постпроцессоры, сборщики, npm-пакеты останутся позади вы откроете для себя node.js ))))
11. ArchLord42 62 24.12.17 14:42 Сейчас в теме
(10)
node.js

лол, я пишу на нем уже 2 год.

У вас видимо опыта мало, вот и пишите тут ахинею

Для верстки писем есть определенные правила, основные из них.

1) только таблицы, никаких дивов.
2) ТОЛЬКО инлайн css и если css, то определенные его свойства, в частности :hover который вы раньше упоминали к ним не относится.
3) никакого js

и это всего навсего "вершина айсберга", пунктов на самом деле поболее.

а тот спиок которым вы тут хорохоритесь попросту на 70% не работспособен в почтовых программах, css не инлайн удаляется, js удаляется, дивы и прочие html элементы удаляются в большинстве случаев.
12. fuxic 292 24.12.17 15:16 Сейчас в теме
(11) Согласен с письмами. Но к ним мы перешли без причины. Только об инлайн css и речь, так что не надо поправлять и ахинеить))

С js таблица встраивается во вложение и не ломайте мне мозг супертаблицами в самом письме
14. ArchLord42 62 24.12.17 15:30 Сейчас в теме
(12)
Но к ним мы перешли без причины.


боже мой, вы вообще читаете что вам пишут?

Сэкономьте мне время


10 стартмани, ок?
15. fuxic 292 25.12.17 13:23 Сейчас в теме
(14) Мне пишет человек, который вместо XSLT или handlebars пишет свои шаблонизаторы и разводит на 10sm, делая вид что что-то знает ))) Поменьше эмоций, давайте поставим точку в бесполезном общении.
16. ArchLord42 62 25.12.17 13:58 Сейчас в теме
(15)
Мне пишет человек, который вместо XSLT или handlebars пишет свои шаблонизаторы


Как вы представлете будет работать handlebears, без браузера где нет JS?) ну, а XLST в музей садомии пора сдавать.

Реализуете что-то получше на native 1С, обязательно скачаю.

разводит на 10sm


Вы просили услугу, я назвал цену..развод?) Сходите к доктору молодой человек.
13. fuxic 292 24.12.17 15:20 Сейчас в теме
(11) Сэкономьте мне время, на nodejs надо выбрать 1-2 фремворка. Варианты

actionherojs https://www.actionherojs.com/ **
adonisjs http://adonisjs.com
catberry http://catberry.org
dietjs http://dietjs.com/
expressjs https://expressjs.com/ **
hapijs https://hapijs.com
koajs http://koajs.com/
loopback https://loopback.io/ **
mean http://mean.io/
nodaljs http://www.nodaljs.com/
sailsjs https://sailsjs.com/ **
senecajs http://senecajs.org/
strapi https://strapi.io/
totaljs https://www.totaljs.com/ **
17. badboychik 60 27.12.17 11:05 Сейчас в теме
Я как то раз накидал шаблон максимально близкий к 1Сным таблицам, теперь иногда использую в формах чтоб добавить возможности форматирования которых нет в 1С (редко)
Прикрепленные файлы:
TreeDogNight; rpgshnik; +2 Ответить
18. zzzzz 14 22.11.18 10:23 Сейчас в теме
Здравствуйте! Спасибо за код, не было времени разбираться. А так готовый взяла и все работает! Есть пара вопроосов правда.
Можно ли ширину настраивать не значениями, а может есть что то типа "по ширине документа", а ширину колонок, например в процентном соотношении? И если у меня в таблице есть пустые ячейки, то они выводятся без рамки. Можно ли где то в коде насильственно прислюнить этот "border"? Спасибо.
rpgshnik; +1 Ответить
19. rpgshnik 909 22.11.18 11:34 Сейчас в теме
(18)
Можно ли ширину настраивать не значениями, а может есть что то типа "по ширине документа", а ширину колонок, например в процентном соотношении? И если у меня в таблице есть пустые ячейки, то они выводятся без рамки. Можно ли где то в коде насильственно прислюнить этот "border"? Спасибо.

Если честно не силен HTML, думаю там всё возможно если разобраться :) Я делал довольно примитивный вывод табличной части.
Оставьте свое сообщение