如何在django表单声明中设置标签的css类?

时间:2011-08-05 15:59:02

标签: django django-forms

我正在使用django-uniform并使用一些统一的功能,我正在寻找一种直接从表单声明添加css类的方法(对于独立小部件)。

(作为奖励,这里是我可重复使用的只读自制的mixin片段......)

from django import forms

def _get_cleaner(form, field):
    def clean_field():
        return getattr(form.instance, field, None)
    return clean_field

class UniformROMixin(forms.BaseForm):
    """
    UniformROMixin, inherits to turn some fields read only

      - read_only = list of field names.
    """

    def __init__(self, *args, **kwargs):
        super(UniformROMixin, self).__init__(*args, **kwargs)
        if hasattr(self, "read_only"):
            if self.instance and self.instance.pk:
                for field in self.read_only:
                    self.fields[field].widget.attrs['readonly'] = True
                    self.fields[field].widget.attrs['class'] += "readOnly"
                    # here I would like to set css class of the label
                    # created from the self.fields[field].label string
                    setattr(self, "clean_" + field, _get_cleaner(self, field))

我现在唯一的办法是在我的通用表单模板上添加一些javascript并手动添加类。

有什么明智的想法吗?

2 个答案:

答案 0 :(得分:21)

小部件有一个attrs关键字参数,它带有一个dict,它可以定义它呈现的输入元素的属性。表单还有一些属性,您可以定义这些属性来更改Django显示表单的方式。请看以下示例:

class MyForm(forms.Form):
    error_css_class = 'error'
    required_css_class = 'required'
    my_field = forms.CharField(max_length=10,
                               widget=forms.TextInput(attrs={'id': 'my_field',
                                                             'class': 'my_class'}))

这适用于任何Widget课程。不幸的是,如果你只做{{ field }},那么改变Django呈现标签的方式并不容易。幸运的是,您可以在模板中使用表单对象:

<form>
    {% for field in form %}
        <label class="my_class" for="{{ field.name }}">{{ field.label }}</label>
        {{ field }}
    {% endfor %}
    <button type="submit">Submit</button>
</form>

然后,您可以随时为您正在使用的对象添加任意属性:

# In a view...
form = MyForm()
form.label_classes = ('class_a', 'class_b', )
# Or by hijacking ```__init__```
class MyForm(forms.Form):
    def __init__(self, *args, **kwargs):
        self.my_field = forms.CharField(max_length=10,
                                        widget=forms.TextInput(attrs={'id': 'my_field',
                                                                      'class': 'my_class'}))
        self.my_field.label_classes = ('class_a', 'class_b', )
        super(MyForm, self).__init__(*args, **kwargs)

使用上下文中的表单呈现模板,然后在模板中执行以下操作:

<form>
    {% for field in form %}
        <label class="{% for class in field.label_classes %}{{ class }} {% endfor %}"
               for="{{ field.name }}">{{ field.label }}</label>
        {{ field }}
    {% endfor %}
    <button type="submit">Submit</button>
</form>

无论你喜欢什么。

答案 1 :(得分:3)

我发现这个片段可能是一个很好的答案:

How to add css class and "*" to required fields's labels

这里是对我的需求的调整(尚未测试,我将在完成后编辑帖子):

from django.utils.html import escape

def readonly_cssclass_adder(bound_field, label_content, label_attrs):
    if 'readonly' in bound_field.field.widget.attrs:
        if 'class' in attrs:
            label_attrs['class'] += " readOnly"
        else:
            label_attrs['class'] = "readOnly"
    return label_content, label_attrs


def add_required_label_tag(original_function, tweak_foos=None):
    if not tweak_foos:
        return original_function

    def required_label_tag(self, contents=None, attrs=None):
        contents = contents or escape(self.label)
        if attrs is None:
            attrs = {}
        for foo in tweak_foos:
            contents, attrs = foo(self, contents, attrs)
        return original_function(self, contents, attrs)
    return required_label_tag

def decorate_bound_field():
    from django.forms.forms import BoundField
    BoundField.label_tag = add_required_label_tag(BoundField.label_tag, 
                                           tweak_foos=[readonly_cssclass_adder])

如果你有一个更好的解决方案,不会调整我仍在听的所有BoundField类。

编辑:   可以链接到django统一方式来处理必填字段,但它似乎不会调用readonly_cssclass_adder。但我找到了另一个更简单的解决方案,我的readOnly小部件自动转为readOnly ctrlHolder

此添加是我现在最喜欢的回复:

编辑2:我在结束时选择的另一种方式是“覆盖”不调用BoundField.label_tag的uni_form/field.html模板。所以我在这里检查了田野状态。

<label for="{{ field.auto_id }}"{% if field.field.required %}
       class="requiredField{% if field.widget.attrs.readonly %} readOnlyLabel{% endif %}"
       {% else %}{% if field.widget.attrs.readonly %}class="readOnlyLabel"{% endif %}{% endif %}>
    {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
</label>