从模型表单格式化 django 脆皮表单答案

【问题标题】：formatting django crispy form from model form从模型表单格式化 django 脆皮表单
【发布时间】：2017-07-22 11:24:37
【问题描述】：

我正在使用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 类中使用FormHelper 对象来自定义一些lookout，如以下脆皮表单文档中所示：

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 %}

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

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

【问题讨论】：

标签： django django-forms django-crispy-forms

【解决方案1】：

在您引用的gist 中，有许多事情无法解释，还有一些遗漏。此外，您正在尝试使用jQuery/jQuery UI for your dialog，而他们正在使用Bootstrap，没有对话框。

让我们来解决所有这些问题。首先是DummyForm。该要点不包括提供左/右布局所需的 CSS 类（来自 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，并且他们忽略了在他们的示例表单类中包含几行关键代码。

【讨论】：

这是一个很棒的答案。如果可以的话，我会投票 100 次！谢谢！