Django CrispyForms - 在单独的引导选项卡中呈现每种形式的formset

时间:2015-03-07 20:49:57

标签: django twitter-bootstrap-3 django-crispy-forms

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

enter image description here

我的表单:

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 formset禁令的一些信息:

1 个答案:

答案 0 :(得分:6)

我将如何做到这一点:

<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