【问题标题】:inline form with django crispy form带有 django 脆皮表格的内联表格
【发布时间】:2018-04-04 04:30:50
【问题描述】:

很抱歉,我只是不明白,这里的docs 非常棒,而且我使用几乎相同的示例,我只有两个字段,我想内联显示,但它是就是不行,

我的表格:

from django import forms

from crispy_forms.helper import FormHelper
from crispy_forms import layout, bootstrap
from crispy_forms.bootstrap import InlineField, FormActions, StrictButton
from crispy_forms.layout import Layout

from ..models import EmployeeModel


class EmployeeCreateForm(forms.ModelForm):
    """
    TODO: Extend CompanyModel into Form
    :returns: TODO
    """
    def __init__(self, *args, **kwargs):
        super(EmployeeCreateForm, self).__init__(*args, **kwargs)

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.method = "POST"
        self.helper.form_class = 'form-inline'
        self.helper.field_template = 'bootstrap3/layout/inline_field.html'
        self.helper.form_action = "company:create-employee"

        self.helper.layout = Layout(
            'first_name',
            'last_name',
            StrictButton('Add', css_class='btn-default'),
        )

    class Meta:
        model = EmployeeModel
        fields = ["first_name", "last_name"]

还有我的模板:

{% extends "base.html" %}
{% load i18n static %}

{% load crispy_forms_tags %}

{% block content %}
<nav class="navbar fixed-top navbar-light bg-faded">
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="{% url 'why' %}">WHY SCREEN?</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">BLOG</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{% url 'faq' %}">FAQ</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{% url 'about' %}">ABOUT</a>
    </li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <p style="padding:60px;"></p>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-2">
      <form action="{% url 'company:create-employee' %}" method="post">
        {% csrf_token %}
        {% crispy form %}
      </form>
    </div>
  </div>
</div>

但是表单仍然是水平呈现的并且不是内联的,所以我在这里缺少的东西可以请有人解释一下。

【问题讨论】:

  • 根据文档 {% crispy form form.helper %} 应该可以工作
  • 我知道了,我现在就回答,是的,这可能有效,但我使用了Div class fromcrispy_forms.bootstrap import Div
  • 请注意,如果您命名您的 FormHelper 属性助手,您只需要做:{% crispy form %}
  • 使用酥脆表格的完美示例

标签: django forms django-crispy-forms


【解决方案1】:

终于搞定了,是这样的

from django import forms
from django.forms.models import formset_factory

from crispy_forms.helper import FormHelper
from crispy_forms import layout, bootstrap
from crispy_forms.bootstrap import InlineField, FormActions, StrictButton, Div
from crispy_forms.layout import Layout
from crispy_forms import bootstrap, layout

from company.models.employee_model import EmployeeModel


class EmployeeCreateForm(forms.ModelForm):
    """
    TODO: Extend CompanyModel into Form
    :returns: TODO
    """
    def __init__(self, *args, **kwargs):
        super(EmployeeCreateForm, self).__init__(*args, **kwargs)

        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.method = "POST"
        self.helper.form_class = 'form-inline'
        self.helper.field_template = 'bootstrap3/layout/inline_field.html'
        self.helper.form_action = "company:create-employee"

        self.helper.layout = Layout(
        Div(
            Div('first_name', css_class="col-sm-2"),
            Div('last_name', css_class="col-sm-2"),
            Div('middle_initial', css_class="col-sm-2"),
            Div('social_security_number', css_class="col-sm-2"),
            bootstrap.FormActions(
                layout.Submit('submit', 'Add', css_class='btn btn-primary')),
            css_class='row',
        )
    )

    class Meta:
        model = EmployeeModel
        fields = ["first_name", "last_name", "middle_initial", "social_security_number"]

我已经使用了Div 和css_class='row',我还在Div's 中添加了css_class,并且效果很好。表单现在内联显示。

【讨论】:

    【解决方案2】:

    Crispy Forms layouts 还允许您通过以下方式执行此操作:

    InlineCheckboxes('field_name')
    

    【讨论】:

      猜你喜欢
      • 2019-07-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-07-22
      • 2020-08-21
      • 2016-01-29
      • 1970-01-01
      • 2014-05-20
      相关资源
      最近更新 更多