2017-09-25 70 views
1

我正在做django項目。我喜歡DRY的原則。我有一個表格可以應用於所有需要它的頁面。我的意思是基於django文檔的通用表單。但在表單中,可以選擇類型,文件上傳,複選框,收音機等,我不喜歡原生html的設計。我想利用一些定製材料的設計。我該怎麼做?下面是我的表單,我的表單有複選框,文件上傳和多個選擇,我需要自定義。簡而言之,我的問題是如何讓我的通用表單設計器友好?django表單模板設計器友好

現在我處理我的表單模板遵循

<form class="form" role="form" action="" method="post"> 
    {% csrf_token %} 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.company.id_for_label}}">Company</label> 
     <select class="form-control" name="{{ form.company.name }}" id="{{ form.company.id_for_label}}"> 
      <option value=""></option> 
      {% for id, name in form.company.field.choices %} 
       <option value="{{ id }}" class="option">{{ name }}</option> 
      {% endfor %} 
     </select> 
    </div> 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.name.id_for_label}}">Job Title</label> 
     <input type="text" id="{{ form.name.id_for_label }}" name="{{ form.name.name }}" class="form-control"> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group label-floating"> 
       <label class="control-label" for="{{ form.description.id_for_label}}">{{ form.description.label }}</label> 
       <div class="markdownx"> 
        {{ form.description|add_css:'form-control' }} 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.category.id_for_label}}">{{ form.category.label }}</label> 
     <select class="form-control" name="{{ form.category.name }}" id="{{ form.category.id_for_label}}"> 
      <option value=""></option> 
      {% for id, name in form.category.field.choices %} 
       <option value="{{ id }}">{{ name }}</option> 
      {% endfor %} 
     </select> 
    </div> 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.city.id_for_label}}">{{ form.city.label }}</label> 
     <input type="text" id="{{ form.city.id_for_label }}" name="{{ form.city.name }}" class="form-control"> 
    </div> 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.address.id_for_label}}">{{ form.address.label }}</label> 
     <input type="text" id="{{ form.address.id_for_label }}" name="{{ form.address.name }}" class="form-control"> 
    </div> 
</form> 

這樣的代碼來顯示的形式變得如此龐大,僅1種形式。用超過8個10表格爲應用程序編寫這麼龐大的代碼並不好。

更好的方法是

{% load add_css %} 
<div class="row"> 
    <div class="col-lg-12"> 
     <div class="text-center m-t-lg"> 
      <form class="form-horizontal" role="form" action="" method="post" enctype='multipart/form-data'> 
       {% csrf_token %} 
       {% for field in form %} 
        {% if field.errors %} 
         <div class="form-group has-error"> 
          <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label> 
          <div class="col-sm-10"> 
           {{ field|add_css:'form-control' }} 
           <span class="help-block"> 
           {% for error in field.errors %}{{ error }}{% endfor %} 
          </span> 
         </div> 
        </div> 
       {% else %} 
        <div class="form-group"> 
         <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label> 
         <div class="col-sm-10"> 
          {{ field|add_css:'form-control' }} 
          {% if field.help_text %} 
           <p class="help-block"><small>{{ field.help_text }}</small></p> 
          {% endif %} 
         </div> 
        </div> 
       {% endif %} 
      {% endfor %} 
      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
        <button type="submit" class="btn btn-primary">Submit</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 
</div> 

但這裏是我面臨的一個困難。我無法檢查其文件上傳字段或多個選擇字段等,所以我可以相應地設計它們。因爲有時候,我需要處理很多div來正確顯示它。

有什麼辦法讓表單模板對設計者更靈活?

+0

第二個模板中的''{%else%}''是縮進的。 – Bestasttung

+0

這是從崇高的HTML美化。我需要安裝更漂亮的插件。 – Serenity

回答

0

您可以在字段定義中使用arg widget,並創建一些自定義窗口小部件模板。所以你定義一次,你只需要關心模板中的打印字段。這裏的文檔widgetcustom widget

+0

你的意思是說這樣的話嗎? 'widgets = { 'established_year':forms.TextInput(attrs = {'class':'datepicker'}) }' – Serenity

+0

yes like something – Bestasttung