django

Django 양식에서 모델을 만들고 업데이트하기 위해 재사용 가능한 양식 템플릿을 만드는 데 며칠을 보냈습니다. ModelForm을 사용하여 개체를 변경하거나 만듭니다. 내 양식을 스타일링하기 위해 부트 스트랩도 사용하고 있습니다. 과거에는 일부 양식에 django_form_tweaks를 사용했지만 템플릿 종속성이 많지 않은 사용자 정의가 필요했습니다. 프로젝트에 이미 jQuery가 있으므로 해당 속성을 활용하여 양식 스타일을 지정하기로 결정했습니다. 다음은 코드이며 모든 형식으로 작업 할 수 있습니다.

#forms.py
from django import forms
from user.models import User, UserProfile
from .models import Task, Transaction

class AddTransactionForm(forms.ModelForm):
    class Meta:
       model = Transaction
       exclude = ['ref_number',]
       required_css_class = 'required'

Views.py

@method_decorator(login_required, name='dispatch')
class TransactionView(View):
def get(self, *args, **kwargs):
    transactions = Transaction.objects.all()
    form = AddTransactionForm
    template = 'pages/transaction.html'
    context = {
        'active': 'transaction',
        'transactions': transactions,
        'form': form
    }
    return render(self.request, template, context)

def post(self, *args, **kwargs):
    form = AddTransactionForm(self.request.POST or None)
    if form.is_valid():
        form.save()
        messages.success(self.request, 'New Transaction recorded succesfully')
        return redirect('dashboard:transaction')
    messages.error(self.request, 'Fill the form')
    return redirect('dashboard:transaction')

HTML 코드
참고 : 많은 뷰를 만드는 번거 로움을 없애기 위해 bootstrap4 모달을 사용하고 있습니다. 일반 CreateView 또는 UpdateView를 사용하는 것이 더 낫습니다. 부트 스트랩과 jqQery 연결

 <div class="modal-body">
    <form method="post" class="md-form" action="." enctype="multipart/form-data">
      {% csrf_token %}
      {% for field in form %}
      <div class="row">
        <div class="col-md-12">
          <div class="form-group row">
            <label for="" class="col-sm-4 col-form-label {% if field.field.required %}
            required font-weight-bolder text-danger{%endif %}">{{field.label}}</label>
            <div class="col-sm-8">
              {{field}}
            </div>

          </div>
        </div>
      </div>

      {% endfor %}

      <input type="submit" value="Add Transaction" class="btn btn-primary">
    </form>
  </div>

자바 스크립트 코드 는 이것을 $(document).ready(function() { /* ... */});함수 에로드하는 것을 기억하십시오 .

var $list = $("#django_form :input[type='text']");
$list.each(function () {
    $(this).addClass('form-control')
  });
  var $select = $("#django_form select");
  $select.each(function () {
    $(this).addClass('custom-select w-90')
  });
  var $list = $("#django_form :input[type='number']");
  $list.each(function () {
    $(this).addClass('form-control')
  });
  var $list = $("form :input[type='text']");
  $list.each(function () {
    $(this).addClass('form-control')
  });
  var $select = $("form select");
  $select.each(function () {
    $(this).addClass('custom-select w-90')
  });
  var $list = $("form :input[type='number']");
  $list.each(function () {
    $(this).addClass('form-control')
  });

답변