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

我正在使用django-crispy-forms生成一个简单的形式，它显示在jquery对话框中。我的模型如下：从模型形式格式化Django脆皮形式

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对象来定制一些瞭望如图所示，香脆形式的文档，如下所示：

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）中，标签和组件是水平放置的，但它们是垂直放置的。我还在窗体中的标签旁边看到一个*，这很奇怪。附上的屏幕截图显示了它。

来源

2017-03-02 Luca

有许多事情在gist你引用的离开原因不明，与一对夫妇ommissions沿。此外，您正尝试使用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。我做了一些适度的调整，使这个有点清洁&使用自举模式对话框正确的标记，所以让我知道如果在差异的任何问题：

{% 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，他们忽略在他们的示例表单类中包含几行关键代码。

来源

2017-03-02 17:21:36 YellowShark

这是一个很棒的答案。如果可以的话，我会加倍努力！谢谢！ – Luca

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

回答

相关问题