從模型形式格式化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脆皮形式

回答

相關問題