@shmostertoster

Как НЕ дублировать select в HTML миллион раз?

Здравствуйте!
Подскажите, как не дублировать select в HTML миллион раз?
Делаю приложение по заполнению табеля.
HTML файл на одного работника получается в 400 строк (за счет повторов select для каждого дня).
На подразделение в 400 человек - этож не загрузится никогда. )))
31 колонка для дат + по 4 строки (из list) на одного работника (ФИО+график работы+табель+select-ы (dict) на каждую дату с видом неявки)
Как можно решить вопрос с select-ами чтобы не дублировать их в коде HTML?
C учетом того, что измененные значения в select нужно писать в БД.
Сейчас select имеют такой вид.
<td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD01" class="selectpicker form-control">
									{% for i in waka %}
									<option value="{{ i.letter }}">{{ i.letter }}</option>
									{% endfor %}
</select>
</div></strong></td>

Направьте в нужное русло.
Спасибо!

UPD!:
HTML выглядит примерно таким образом (сократил до 5 ячеек в таблице. всего их 31)
Виды неявок в словаре - там 41 вид неявок:

<html>
<head>
<title>Месяц</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<table width="100%" border="1" cellspacing="0">
  <tr>
    <td bordercolor="1"></td>
  </tr>
  <tr>
    <td bordercolor="1"><table width="100%" border="1" cellspacing="0">
      <tr bgcolor="#D1D5C1">
        <td><div align="center"><span>1</span></div></td>
        <td><div align="center"><span>2</span></div></td>
        <td><div align="center"><span>3</span></div></td>
        <td><div align="center"><span>4</span></div></td>
        <td><div align="center"><span>5</span></div></td>
      </tr>
    <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD01" class="selectpicker form-control">
									{% for i in waka %}
									<option value="{{ i.letter }}">{{ i.letter }}</option>
									{% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD02" class="selectpicker form-control">
									{% for i in waka %}
									<option value="{{ i.letter }}">{{ i.letter }}</option>
									{% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD03" class="selectpicker form-control">
									{% for i in waka %}
									<option value="{{ i.letter }}">{{ i.letter }}</option>
									{% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD04" class="selectpicker form-control">
									{% for i in waka %}
									<option value="{{ i.letter }}">{{ i.letter }}</option>
									{% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD05" class="selectpicker form-control">
									{% for i in waka %}
									<option value="{{ i.letter }}">{{ i.letter }}</option>
									{% endfor %}
</select>
</div></strong></td>
      </tr>
</body>
</html>
  • Вопрос задан
  • 666 просмотров
Пригласить эксперта
Ответы на вопрос 4
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
Можно сделать новим способом HTML5 datalist
<input list="workers" name="worker[234]">
<input list="workers" name="worker[456]">
<input list="workers" name="worker[333]">
<input list="workers" name="worker[667]">
<datalist id="workers">
 <option value="Текст1">
 <option value="Текст2">
</datalist>


Вот для него полифил datalist-polyfill или polyfills/datalist
Ответ написан
@M-ka
frontend присматривающийся к ror
Делать селекты вообще нет смысла для дней и дублировать 100500 раз.
Сделать какой то попап/поповер(и тп) с календарем (чисто дни, возможно с какой то правкой количества под учет месяца для которого изменения)
Всю сетку с днями оформить красиво... возможно через какой то класс. На этот же класс по клику поставить вызов ф-и для запуска в месте клика. В скрипт от попапа передав место вызова, как результат всунуть и отобразить от места клика или просчитать положение для позиционирования, по выбору дня, внести изменение в ячейку (не говорю конкретно о td, а о том, что в качестве таковой выступает).
В крайнем случаи, если проблематично собирать значения, которые текстом, то для более простой сборки, можно всунуть в инпуты с типом текст и его оформить красиво...
Ответ написан
Я такое делал, сперва делаем селекты только с одним значением (которое установлено) и скрытый селект, при клике по любому селекту option копируем в этот, устанавливаем значение selected и открытие селекта
Ответ написан
@pcdesign
1) Использовать Wtforms + наследование форм + wtf.quick_form (если это bootstrap), чтобы избавится от дублей.

2) Для сжатия html использовать https://pypi.python.org/pypi/django-htmlmin
он хоть и для Django, но на фласке работает.

3) И еще радикальный способ, недавно его использовал.
https://datatables.net
И по скорости, он может работать до 1 млн. строк. данных с очень быстрой работой и сортировкой.
Я загружал ajax ом данные, а все вычисление и рендеринг переложил на браузер юзера.
Все работает мгновенно.
Это рекомендации по скорости:
Client-side processing - DOM sourced data: ~5'000 rows.
Client-side processing - Ajax sourced data (ajax): ~50'000 rows.
Server-side processing (serverSide): millions of rows.

https://datatables.net/faqs/#speed

Все html и select в том числе накладывается уже при рендеринге, а данные отдаются в чистом виде
https://datatables.net/reference/option/columns.render
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы