Django CrispyForms - 在单独的 bootstrap 选项卡中呈现表单集的每个表单

Question

我想使用 django-crispyForms 在不同的 bootstrap3 选项卡中呈现表单集的每种形式，但这似乎并不简单，因为 crispyForms 还没有完全处理表单集。

我的表格：

class BlogMessageForm(forms.ModelForm):
    class Meta:
        model = BlogMessage
        fields = ['field1', 'field2', ]

class BlogMessageFormsetHelper(FormHelper):
    def __init__(self, *args, **kwargs):
        super(BlogMessageFormsetHelper, self).__init__(*args, **kwargs)
        self.form_tag = False
        self.layout = Layout(
            TabHolder(
                Tab('Form%s' % (form.pk),
                    'field1', 'field2', 'DELETE',
                    )
             )

        )

我的看法：

def all_blogs_messages_in_bootstrap_tab(request):
  all_blog_messages = BlogMessage.objects.all()
  blogMessageForm = modelformset_factory(BlogMessage, form=BlogMessageForm, extra=1, can_delete=True)
  formset = blogMessageForm(queryset=all_blog_messages)
  helper = BlogMessageFormHelper()

  render_to_response("blogs/blogMessage_forms.html", {'formset': formset, 'helper': helper}, context_instance=RequestContext(request))

我的 crispyForms 模板：

{% load crispy_forms_tags %}
<form method="post" action="" encrypt="multipart/form-data">{% csrf_token %}
    {% crispy formset helper %}
</form>

这里有一些关于 crispyForm 表单集约束的信息：

django crispy forms: Nesting a formset within a form
related issue
crispyForm tab and tab holder doc

Answer 1

我会这样做：

<form method="post" enctype="multipart/form-data">{% csrf_token %}
  {{ formset.management_form }}
  <div role="tabpanel">
    <ul class="nav nav-tabs" role="tablist">
      {% for form in formset %}
        <li role="presentation" class="{% if forloop.first %}active{% endif %}">
          <a href="#id_form-{{ forloop.counter0 }}" aria-controls="id_form-{{ forloop.counter0 }}" role="tab" data-toggle="tab">
            {% if forloop.counter0 < formset.initial_forms|length %}
              Form{{ forloop.counter }}
            {% else %}
              New Form
            {% endif %}
          </a>
        </li>
      {% endfor %}
    </ul>
    <div class="tab-content">
      {% for form in formset %}
        <div role="tabpanel" class="tab-pane{% if forloop.first %} active{% endif %}" id="id_form-{{ forloop.counter0 }}">
          {% crispy form %}
          {% if form.instance.pk %}
             <input id="id_form-{{ forloop.counter0 }}-id" name="form-{{ forloop.counter0 }}-id" type="hidden" value="{{ form.instance.id }}">
          {% endif %}
          {% if forloop.counter0 < formset.initial_forms|length %}
            {% if formset.can_delete %}
              <input id="id_form-{{ forloop.counter0 }}-DELETE" name="form-{{ forloop.counter0 }}-DELETE" type="hidden">
              <button type="submit" data-id="id_form-{{ forloop.counter0 }}-DELETE" class="btn btn-default btn-formset-delete">Delete</button>
            {% endif %}
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
</form>

差点忘了，如果没有一些 javascript，删除按钮将无法使用。但这当然是可选的，可以使 delete 字段可见并删除按钮，否则：

$(document).ready(function(){
    $(".btn-formset-delete").click(function(){
        $("#" + $(this).data('id')).val("on");
        return true;
    });
});

也将此添加到表格中：

def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.form_tag = False
    self.helper.disable_csrf = True

Django CrispyForms - 在单独的 bootstrap 选项卡中呈现表单集的每个表单

Django CrispyForms - Render every form of a formset in separate bootstrap tabs

django

twitter-bootstrap-3

django-crispy-forms