Я создал шаблон, который будет рекурсивно строить вложенные закладки в форме/s. Каждая закладка может содержать форму или другую вкладку, вплоть до n уровней.Django Вложенная вкладка Форма
Это создается через представление, в котором упорядоченный словарь (form_dict
) передается через контекст. В файле forms/snippets/form_dict.html form_dict
выполняется итерация, и либо формирует форму (forms/snippets/form_standalone.html), либо снова вызывает себя, если узел содержит другой упорядоченный словарь, код приведен ниже:
формы/фрагменты/form_dict.html
{% load sekizai_tags %}
{% if form_dict %}
{% if not level or not tier %}
{% include "forms/snippets/form_dict.html" with form_dict=form_dict level='Tab' tier='0' %}
{% else %}
{% with tier=tier|add:1 %}
<ul class="nav nav-tabs nav-tabs-{{tier}}" {%ifequal tier 0 %}id="myTab"{% endifequal %}>
{% for key,form in form_dict.items %}
{% with counter=forloop.counter|stringformat:"s" %}
{% with newLevel=''|add:level|add:'-'|add:counter %}
<li class="{% ifequal forloop.counter 1 %}active{% endifequal %}">
<a href="#{{newLevel}}" data-toggle="tab" {% if form.errors %}class="has-error"{% endif %}>{{key}}</a>
</li>
{% endwith %}
{% endwith %}
{% endfor %}
</ul>
<div class="tab-content tab-content-{{tier}}">
{% for k,v in form_dict.items %}
{% with counter=forloop.counter|stringformat:"s" %}
{% with newLevel=''|add:level|add:'-'|add:counter %}
<div class="tab-pane {% ifequal forloop.counter 1 %}active{% endifequal %}" id="{{newLevel}}">
{% if v.items %}
{% include "forms/snippets/form_dict.html" with form_dict=v level=newLevel tier=tier %}
{% else %}
{% include "forms/snippets/form_standalone.html" with form=v heading=k %}
{% endif %}
</div>
{% endwith %}
{% endwith %}
{% endfor %}
{% ifequal tier 1 %}
{% addtoblock 'js' %}
<script type='text/javascript'>
$('.nav-tabs li a').click(function(e) { history.pushState(null, null, $(this).attr('href'));});
var hash = location.hash.split('?')[0];
if(hash) {
var $link = $('[href=' + hash + ']');
var parents = $link.parents('.tab-pane').get();
$(parents.reverse()).each(function() {
$('[href=#' + this.id + ']').tab('show') ;
});
$link.tab('show');
jQuery(window).load(function(){
jQuery("html,body").animate({scrollTop:0},1);
});
}
</script>
{% endaddtoblock %}
{% endifequal %}
</div>
{% endwith %}
{% endif %}
{% endif %}
Все работает, как ожидалось, кроме случаев, когда ошибка обнаружена при подаче, я хочу, чтобы изменить цвет вкладок, чтобы отразить, что форма на вкладке есть проблема проверки. В приведенном ниже коде:
<a href="#{{newLevel}}" data-toggle="tab" {% if form.errors %}class="has-error"{% endif %}>{{key}}</a>
Это имеет эффект идентификации вкладки (см рисунок ниже), тем не менее, он выделяет только вкладку листа - Я хочу также назначить один и тот же класс для родительских вкладок, а также
в приведенном выше, ошибках были выявлены в обеих счетов и адрес доставки, я хотел бы красную подсветку упорствовать вышестоящую для родительских вкладок тоже, так что оба адреса и вкладка профилей пометки «красные аналогичным образом.
Может ли кто-нибудь предложить предложение по наилучшему способу сделать это?