从模型形式格式化 django 脆皮形式

Question

我正在使用 django-crispy-forms 生成一个显示在 jquery 对话框中的简单表单。我的模型如下：

class DummyModel(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField(max_length=150)
    time_points = models.PositiveIntegerField()
    more_text = models.CharField(max_length=100)

    class Meta:
        db_table = "dummy"

我在 form class 中使用 FormHelper 对象来自定义一些监视功能，如 crispy forms 文档所示，如下所示：

class DummyForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(DummyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.form_class = 'form-horizontal'
        self.helper.layout = Layout(
            Field('name', css_class='input-xlarge'),
            Field('description', rows="3", css_class='input-xlarge'),
        )

    class Meta:
        model = DummyModel
        fields = ['name', 'description']

现在在我的模板中，我执行以下操作：

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block title %}Dummy | Test {% endblock %}

{% block content %}

    <div id="dialog" title="Edit" style="display: none;">
        <form method="post" action="">
            {% csrf_token %}
            {% crispy DummyForm %}

            <input type="submit" value="Submit Form"/>
        </form>
    </div>

    {% load static %}
    {% load render_table from django_tables2 %}

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        function EditDialog() {
            $( "#dialog" ).dialog();
            return false;
        }
    </script>

     <div class="function-page">
         <div class="table-form">
                <div class="function-container">
                    {% render_table reviews %}
                </div>
         </div>
     </div>

{% endblock %}

当从 link 调用 EditDialog() javascript 时加载表单，这会创建一个包含表单的 jquery 对话框。

不过，我的格式化好像没有任何效果。例如，在此处的示例要点 (https://github.com/django-crispy-forms/django-crispy-forms) 中，标签和组件是水平放置的，但对我来说它们是垂直放置的。我还看到表单中标签旁边有一个 *，这很奇怪。随附的屏幕截图显示了它。

Answer 1

在没有对话的情况下，gist you referenced, along with a couple of ommissions. Additionally, you are trying to use jQuery/jQuery UI for your dialog, and they are using Bootstrap 中有许多事情无法解释。

让我们来解决所有这些问题。首先是DummyForm。该要点不包括提供 left/right 布局所必需的 CSS classes（来自 Bootstrap）。您需要添加 helper.label_class 和 helper.field_class 值。另外，我在这里要解决的还有一个与您的模板有关的问题：您不应该将 <form> 标记放在您的模板中； crispy_forms 会为您解决这个问题。这意味着您需要将提交按钮放入表单模型的布局说明中，而不是模板中。

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Field, ButtonHolder, Submit

class DummyForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(DummyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.form_class = 'form-horizontal'
        # NEW:
        self.helper.label_class = 'col-sm-2'
        self.helper.field_class = 'col-sm-10'

        self.helper.layout = Layout(
            Field('name', css_class='input-xlarge'),
            Field('description', rows="3", css_class='input-xlarge'),
            # NEW:
            ButtonHolder(
                Submit('submit', 'Submit', css_class='btn btn-primary')
            )
        )

    class Meta:
        model = DummyModel
        fields = ['name', 'description']

接下来，我们需要处理您的模板。这是使用 Bootstrap 而不是 jQuery UI 的更新版本。请注意使用 .modal() 而不是 .dialog()，您可以找到有关选项 here 的更多信息。我做了一些适度的调整，使它更清晰一些，并为 Bootstrap 模态对话框使用正确的标记，所以如果对差异有任何疑问，请告诉我：

{% load crispy_forms_tags %}
{% load static %}
<!doctype html>
<html lang="en">
<head>
  <title>{% block title %}Dummy | Test {% endblock %}</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js
"></script>

  <script>
    function EditDialog() {
      $("#dialog").modal();
      return false;
    }
  </script>
</head>
<body>
<div class="container">
  <button class="button" onclick="EditDialog()">CLICK TO SHOW DIALOG</button>

  <div id="dialog" class="modal" title="Edit" style="display:none">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          {% crispy DummyForm %}
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

这就是他们如何让他们的要点看起来像他们所做的那样的答案：他们正在使用 Bootstrap，并且他们忽略了在他们的示例表单中包含几行关键代码 class.

从模型形式格式化 django 脆皮形式

formatting django crispy form from model form

django

django-forms

django-crispy-forms