モデルフォームからdjango crispyフォームをフォーマットする

私はdjango-crispy-formsを使用して、jqueryダイアログボックスに表示される簡単なフォームを生成しています。次のように私のモデルは次のとおりです。モデルフォームからdjango crispyフォームをフォーマットする

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のdialoを作成しますその中に形のあるg。

ただし、私の書式設定は効果がないようです。例えば、ここの要点（https://github.com/django-crispy-forms/django-crispy-forms）では、ラベルとコンポーネントは水平に配置されていますが、それらは私のために垂直に配置されています。私はまた、*が奇妙な形のラベルの隣にあるのを見ます。添付されたスクリーンショットにそのスクリーンショットが表示されます。

出典

2017-03-02 Luca

あなたがommissionsのカップルと一緒に、参照されている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']

次に、テンプレートのアドレスを指定する必要があります。ここでは、jQuery UIではなくBootstrapを使用する更新版があります。 .dialog()の代わりに.modal()を使用することに注意してください。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を使用していて、サンプルフォームクラスに2行のコード行を含めることを怠っていました。

出典

2017-03-02 17:21:36 YellowShark

これはすばらしい答えです。私はできればそれを100倍upvoteだろう！ありがとうございました！ – Luca

モデルフォームからdjango crispyフォームをフォーマットする

答えて

関連する問題