将类添加到 django 表单小部件字段

Posted 2023-02-24

【中文标题】将类添加到 django 表单小部件字段

【英文标题】：Add class to django form widget field

【发布时间】：2012-02-17 19:49:51

【问题描述】：

我有两个模型：

class Studio(models.Model):
    name = models.CharField("Studio", max_length=30, unique=True)

class Film(models.Model):
    studio = models.ForeignKey(Studio, verbose_name="Studio")
    name = models.CharField("Film Name", max_length=30, unique=True)

我想为 Film 创建一个表单。表单应该有一个 Studio 下拉菜单，但如果用户需要的 Studio 尚未在数据库中，则允许用户输入新的 Studio。 首先，如果有更简单的实现方法，请告诉我。

但我想做的是在 Studio 下拉菜单旁边添加一个“+”图标。如果单击此按钮，它将取消隐藏一个允许用户为新 Studio 输入文本的新字段。我想在未隐藏字段旁边包含一个“-”按钮，如果用户改变主意，它会重新隐藏。这就是我卡住的地方。

我的表单目前如下所示：

class SelectWithPlus(forms.Select):
    def render(self, name, *args, **kwargs):
        html = super(SelectWithPlus, self).render(name, *args, **kwargs)
        plus = render_to_string("form/plus.html", 'field': name)
        return html+plus

class DeSelectWithX(forms.CharField):
    def render(self, name, *args, **kwargs):
        html = super(DeSelectWithX, self).render(name, *args, **kwargs)
        ex = render_to_string("form/ex.html", 'field': name)
        return html+ex

class FilmForm(forms.Form):
    required_css_class = 'required'
    studio = forms.ModelChoiceField(Studio.objects, widget = SelectWithPlus)
    new_studio = forms.CharField(max_length=30, required=False, label = "New Studio Name", widget = DeSelectWithX)
    name = forms.CharField(max_length=30, label = "Film Name")

    def __init__(self, *args, **kwargs):
        super(MdlForm, self).__init__(*args,**kwargs)
        self.fields['new_studio'].widget.attrs['class'] = 'hidden_studio_field'

这个想法是工作室字段有一个小部件，它为“+”图标添加了一点 html：

<a
    href="javascript:void()"
    class="add-another"
    id="add_id_ field ">
    <img src="http://mydbupload.s3.amazonaws.com/icon_addlink.gif"   Border ="0" />
</a>

单击此按钮时，它会触发 jquery 以显示适当命名的字段：

<script type="text/javascript">
    $(document).ready(function() 
        $(".hidden_studio_field").hide();
        $('label[for="id_new_studio"]').hide();
    );

    $(function () 
        $('#add_id_studio').click(function() 
            $(".hidden_studio_field").show();
            $('label[for="id_new_studio"]').show();
        );
    );
</script>

所以我想在 new_studio 字段中添加一个类似的“-”按钮。我试图复制 SelectWithPlus 小部件，但我遇到的一个问题是我不能再使用将“hidden_​​studio_field”类添加到该字段的代码。我收到一个错误：“DeSelectWithX”对象没有属性“attrs”

这么短的问题：如何将 css 类型的类添加到由小部件定义的字段？

【参考方案1】：

DeSelectWithX 应该继承自 forms.TextInput，而不是 forms.CharField。