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"

我使用FormHelper类中的form对象来自定义一些了望点，如下面的crispy表单文档所示：

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）中，标签和组件是水平布局的，但它们是垂直布局的。我还在表单中的标签旁边看到*，这很奇怪。附带的屏幕截图显示了它。

Answer 1

您引用的gist中有许多未解释的内容，以及一些遗漏。此外，您尝试使用jQuery/jQuery UI for your dialog，并且他们正在使用Bootstrap，而没有对话框。

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

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的更多信息。我做了一些适度的调整，以使这个更清洁＆amp;为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，他们忽略了在示例表单类中包含几行代码。

从模型格式

1 个答案: