为脆皮复选框添加类

Question

我正在渲染一个 "InlineCheckboxes"，它将允许用户选择多个复选框。我可以给整个元素一个类，但不知道如何给每个复选框的选项设置类。我想给每个复选框设置一个col-3，这样它们就能整齐地排列。

我已经在这个问题上纠结了好几天，我读了所有能找到的资料，但还是想不通。

form.py

preferred_topics = forms.MultipleChoiceField(choices=TOPICS, required=False, widget=forms.CheckboxSelectMultiple())

def __init__(self, *args, **kwargs):
        super(NeedsAnalysisForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Submit'))
        self.helper.layout = Layout(            
            '[..text form..]', '[..text form..]', InlineCheckboxes('preferred_topics'), '[..text 
            form..]')

呈现的是什么。

<div id="div_id_preferred_topics" class="form-group">
    <label for="" class="">
        Preferred topics
    </label>
    <div class="">
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_1" value="ANI">
            <label class="custom-control-label" for="id_preferred_topics_1">
                Animals
            </label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_2" value="ART">
            <label class="custom-control-label" for="id_preferred_topics_2">
                 Art
            </label>
        </div>
[..cont..]

但我想要的是：

<div id="div_id_preferred_topics" class="form-group">
    <label for="" class="">
        Preferred topics
    </label>
    <div class="">
        <div class="col-3 custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_1" value="ANI">
            <label class="custom-control-label" for="id_preferred_topics_1">
                Animals
            </label>
        </div>
        <div class="col-3 custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_2" value="ART">
            <label class="custom-control-label" for="id_preferred_topics_2">
                 Art
            </label>
        </div>
[..cont..]

谢谢你

Answer 1

而不是使用 {{form | crispy}} 您可以使用以下方法

{% load crispy_forms_tags %}


<form action="" method="post">

    {% csrf_token %}

    {% for field in form %}

        <div class="col-3 custom-control custom-checkbox custom-control-inline">
            {{field|as_crispy_field}}
            <label class="custom-control-label" for="{{field.id_for_label}}">{{field.label}}</label>
        </div>

    {% endfor %}

    <button type="submit">Submit</button>

<form>

或者使用crispy forms API，我们可以在 "templates "文件夹中为这个自定义字段创建一个新模板。

custom_checkbox.html

{% load crispy_forms_field %}

<div class="form-group">
  <div class="custom-control custom-checkbox">
    {% crispy_field field 'class' 'custom-control-input' %}
    <label class="custom-control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
  </div>
</div>

现在我们可以创建一个新的脆皮字段，可以在我们的forms.py模块中创建，也可以在一个新的Python模块中创建，命名为fiels.py或其他模块。

表单.py

from crispy_forms.layout import Field

class CustomCheckbox(Field):
    template = 'custom_checkbox.html'

现在我们可以在表单定义中使用它。

表单.py

class CustomFieldForm(AddressForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Row(
                Column('email', css_class='form-group col-md-6 mb-0'),
                Column('password', css_class='form-group col-md-6 mb-0'),
                css_class='form-row'
            ),
            'address_1',
            'address_2',
            Row(
                Column('city', css_class='form-group col-md-6 mb-0'),
                Column('state', css_class='form-group col-md-4 mb-0'),
                Column('zip_code', css_class='form-group col-md-2 mb-0'),
                css_class='form-row'
            ),
            CustomCheckbox('check_me_out'),  # <-- Here
            Submit('submit', 'Sign in')
        )

更多细节请参考 Django Crispy Forms布局文档