如何讓表單集繼承表單的樣式？ 我的意思是，如何在 Django 中設置表單集的樣式？

Question

我有個問題; 我想將樣式放到我的表單集中，因為它沒有從主表單繼承它們，而且設計看起來很糟糕，我不知道如何修復它，或者是否有一種小部件可以使字段看起來更好。 非常感謝

Parte/forms.py

from django import forms
from django.forms import formset_factory

from .models import Parte


class ParteForm(forms.ModelForm):
    class Meta:
        model=Parte
        fields=['codigo','descripcion','quantity','unit_price','total_price','tax_free']

Presupuestos/forms.py

class PresupuestosParteForm(forms.ModelForm):
    class Meta:
        model = Parte
        fields = '__all__'
        widgets = {
            'codigo': forms.TextInput(
                attrs={
                    'class': 'form-control'
                }
            ),
            'quantity': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                }
            ),
            'unit_price': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                    'onchange': 'multiplicar()',
                }
            ),
            'total_price': forms.NumberInput(
                attrs={
                    'class': 'form-control',

                }
            ),
            'tax_free': forms.CheckboxInput(
                attrs={
                    'class': 'form-check-input',
                    'onclick': 'taxes_free(multiplicar())',
                }
            ),
            'descripcion': forms.TextInput(
                attrs={
                    'class': 'form-control'
                }
            ),
            'descuento': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                    'onchange': 'totales()',

                }
            ),
            'total': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                }
            ),

        }


ParteFormSet = formset_factory(ParteForm, extra=1)

Presupuestos/views.py

def create_Presupuestos(request):
   #Crear cada uno de los formularios y reunirlos
   presupuestosclientesform=PresupuestosClientesForm(request.POST or None)
   presupuestosvehiculosform=PresupuestosVehiculosForm(request.POST or None)
   presupuestosparteform=PresupuestosParteForm(request.POST or None)
   presupuestosmanoobraform=PresupuestosManoObraForm(request.POST or None)
   presupuestospagosform=PresupuestosPagosForm(request.POST or None)

   #Creación del formset de parteform

   if request.method == 'POST':
       formset = ParteFormSet(request.POST)
       if formset.is_valid():
           # extract name from each form and save
           pass
       else:
           formset = ParteFormSet()
   else:
       formset = ParteFormSet()


   if presupuestosclientesform.is_valid():
       presupuestosclientesform.save()
       return redirect('presupuestos:index')
   return render(request,'Presupuestos/presupuestos-forms.html',{'presupuestosclientesform':presupuestosclientesform,'presupuestosvehiculosform':presupuestosvehiculosform, 'presupuestosparteform':presupuestosparteform, 'presupuestosmanoobraform':presupuestosmanoobraform,'presupuestospagosform':presupuestospagosform,'formset':formset})

presupuestos-forms.html

                                                                            <table class="table table-bordered table-nowrap align-middle" id="childTable1">
                                                                                <thead class="table-info">
                                                                                  <tr>
                                                                                    <th scope="col">Código</th>
                                                                                    <th scope="col">Descripción</th>
                                                                                    <th scope="col">Cantidad</th>
                                                                                    <th scope="col">Precio Unitario</th>
                                                                                    <th scope="col">Precio Total</th>
                                                                                    <th scope="col">Libre de Impuestos</th>
                                                                                    <th scope="col">Agrega Fila</th>
                                                                                  </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                  <tr>
                                                                                    <td>
                                                                                        {{presupuestosparteform.codigo}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.descripcion}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.quantity}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.unit_price}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.total_price}}
                                                                                    </td>
                                                                                    <td>
                                                                                        <div>
                                                                                            {{presupuestosparteform.tax_free}}
                                                                                        </div>
                                                                                    </td>
                                                                                    <td>
                                                                                      <input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" />
                                                                                    </td>
                                                                                  </tr>
                                                                                    <tr>
                                                                                    {{ formset.management_form }}
                                                                                    {% for form in formset %}
                                                                                        <td>
                                                                                            <div>{{ form.codigo }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.descripcion }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.quantity }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.unit_price }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.total_price }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.tax_free }}</div>
                                                                                        </td>

                                                                                    {% endfor %}
                                                                                    </tr>
                                                                                </tbody>
                                                                              </table>

這里我放的是沒有樣式的formset

Answer 1

您可以查看的另一個選項是 django-widget-tweaks。 它讓您可以在模板中進行樣式設置。 django-widget-tweaks

Answer 2

我認為酥脆的形式正是您要找的

沒有酥脆

帶着酥脆

Answer 3

另一種可以使用內聯小部件更新表單的方法，如下所示：-

class PresupuestosParteForm(forms.ModelForm):
    codigo = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'codigo', 'class': 'form-control'}))
    quantity = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'quantity', 'class': 'form-control'}))
    unit_price = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'unit_price', 'class': 'form-control', 'onchange': 'multiplicar()'}))
    total_price = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'total_price', 'class': 'form-control'}))
    tax_free = forms.CharField(widget=forms.CheckboxInput(attrs={'placeholder': 'tax_free', 'class': 'form-check-input','onclick': 'taxes_free(multiplicar())'}))
    descripcion = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'descripcion', 'class': 'form-control'}))
    descuento = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'descuento', 'class': 'form-control', 'onchange': 'totales()'}))
    total = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'total', 'class': 'form-control'}))

    class Meta:
        model = Parte
        fields = '__all__'