Question

我正在尝试为表单小部件设置类。我有：

<form action="{% url "list" %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.input.label_tag }} {{ form.input.help_text }}</p>
        <p>
            {{ form.input.errors }}
            {{ form.input }}
        </p>
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.itinerary.label_tag }} {{ form.itinerary.help_text }}</p>
        <p>
            {{ form.itinerary.errors }}
            {{ form.itinerary }}
        </p>
        <p><input class="button-primary" type="submit" value="Upload" /></p>
</form>

，看起来像

当我尝试谷歌搜索找到问题的解决方案时，我尝试使用django tweak工具。我将代码修改为这样也会看到它会如何改变：

<form action="{% url "list" %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% load widget_tweaks %}
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.input.label_tag }} {{ form.input.help_text }}</p>
        <p>
            {{ form.input.errors }}
            {{ form.input }}
            {% render_field form.input class="button" %}
        </p>
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.itinerary.label_tag }} {{ form.itinerary.help_text }}</p>
        <p>
            {{ form.itinerary.errors }}
            {{ form.itinerary }}
        </p>
        <p><input class="button-primary" type="submit" value="Upload" /></p>
    </form>

，看起来像

它将类应用于整个窗口小部件，并将整个窗口小部件转换为按钮。

那么如何才能将该类应用于窗口小部件中的按钮？

Answer 1

因此，没有一种简单的方法可以将类添加到表单元素中。

我能够解决这个问题的方法是创建一个自定义模板标记。

如果您有兴趣了解详情，请访问以下链接：https://docs.djangoproject.com/en/1.7/howto/custom-template-tags/

我所做的是在app目录下创建一个名为templatetags的目录。

确保此目录中有__init__.py，然后创建另一个文件。我将我的名字命名为template_helper.py

    # template_helper.py
    from django import template
    from django.utils.datastructures import SortedDict

    register = template.Library()

    @register.filter(name='addcss')
    def addcss(field, css):
       return field.as_widget(attrs={"class":css})

在实际模板中，您只需先通过{% load template_helper %}加载template_helper，然后添加{{ form_element|addcss:"button" }}

您需要以某种方式检查模板标记{% if ... %} 如果您愿意，请确保仅将该类应用于按钮将班级应用于按钮。

    {% load template_helper %}
    <form action="{% url "list" %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.input.label_tag }} {{ form.input.help_text }}</p>
        <p>
            {{ form.input.errors }}
            {% for field in form.input %}
                {{ field|addcss:"button" }}
            {% endfor %}
        </p>
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.itinerary.label_tag }} {{ form.itinerary.help_text }}</p>
        <p>
            {{ form.itinerary.errors }}
            {{ form.itinerary }}
        </p>
        <p><input class="button-primary" type="submit" value="Upload" /></p>
    </form>

祝你好运！

如何在django小部件窗体中修改按钮的类？

1 个答案: