Как создать рекурсивную таблицу в HTML - PullRequest
0 голосов
/ 25 февраля 2012

У меня есть следующий кусок кода:

                <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3>
                {% for keyword in keyword_list %}
                    {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                        <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/>
                        {{keyword.keyword_name}}
                        <br />
                    {% else %}
                        <input type="checkbox" name="cb" value="keywords"  />
                        {{keyword.keyword_name}}
                        <br />
                    {% endif %}
                {% endfor %}

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

Мне нужно, чтобы таблица была динамичной, поскольку число ключевых слов в списке будет увеличиваться.

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

Любой другой эффективный метод, который я мог пропустить?

Это смесь django и html, поэтому не пугайтесь уникальных терминов. : Р

Спасибо за помощь! : D

1 Ответ

3 голосов
/ 25 февраля 2012

Почему бы просто не сделать это явно?

            <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3>
            <table>
              <tbody>
                {% for keyword in keyword_list %}
                  <tr>
                    <td>
                      {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                        <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/>
                      {% else %}
                        <input type="checkbox" name="cb" value="keywords"  />
                      {% endif %}
                      {{keyword.keyword_name}}
                    </td>
                  </tr>
                {% endfor %}
               </tbody>
            </table>

Если вы хотите, чтобы таблица росла горизонтально, просто переместите <tr></tr> теги за пределы for.

Для дальнейшего развертывания выможет потребоваться использовать формы Django с пользовательскими шаблонами , упакованными в FormsSet .

РЕДАКТИРОВАТЬ:

Если вы хотите макет с N столбцами (например, с 3 столбцами), вы можете получить доступ к переменной forloop.counter:

            <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3>
            <table>
              <tbody>
                {% for keyword in keyword_list %}
                  {% if forloop.counter|divisibleby:"3" %}
                    <tr>
                  {% endif}
                    <td>
                      {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                        <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/>
                      {% else %}
                        <input type="checkbox" name="cb" value="keywords"  />
                      {% endif %}
                      {{keyword.keyword_name}}
                    </td>
                  {% if forloop.counter|add:"1"|divisibleby:"3" %}
                    </tr>
                  {% endif}
                {% endfor %}
               </tbody>
            </table>

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

Если вы хотите что-то более сложное, это снова игра с условиями if и переменными forloop.

Для чего-то очень сложного, может быть, лучшенаписать собственный фильтр или тег шаблона, чтобы сделать файл шаблона более понятным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...