Question

我正在尝试在Django中设置一个ModelForm，它将使用django选择的ChosenSelect小部件用于其中一个字段。我已经安装了django-selected，这是我的代码：

class TestForm(ModelForm):
    class Meta:
        model = Test
        widgets = {
            'field': chosenwidgets.ChosenSelect(),
        }

但是，指定widgets无效，无论我是否定义，表单的输出都相同。有什么建议吗？

Answer 1

您是否在模板中加入了form media？

下面的示例模板假定您的基本模板包含块extrastyle和extrahead，其中包含CSS和脚本，并且您已在基础模板中包含jquery 1.4+。

# my_template.html
{% extends "base.html" %}

{% block extrastyle %}
{{ block.super }}
{{ form.media.css }}
{% endblock %}

{% block extrahead %}
{{ block.super }}
{{ form.media.js }}
{% endblock %}

{% block content %}
<form action="." method="post">
    <table>
    {{ form }}
    </table>  
    <p><input type="submit" value="Update" />
</form>  
{% endblock %}

Answer 2

这是我直接使用chosen.js的解决方案。我用bower安装它，然后将它包含在我的管理类Media：

中

class MyModelAdmin(LockableAdmin, admin.ModelAdmin):
    form = MyModelForm # has phase_id field

    class Media:
        js = ('components/chosen_v1.1.0/chosen.jquery.min.js', 'admin_tools/js/chosen_admin.js')
        css = {'all': ('components/chosen_v1.1.0/chosen.min.css', 'admin_tools/css/chosen_admin.css')}

其他的selected_admin.js和chosen_admin.css文件包含我的init脚本和css，使select选项更像django admin。以下是内容：

chosen_admin.js：

/* Create own jquery namespace */
var django = {
    "jQuery": django.jQuery.noConflict(true)
};
var jQuery = django.jQuery;
var $=jQuery;

$( document ).ready(function() {
    $('#id_phase_id').chosen();
});

chosen_admin.css（可选）：

a.chosen-single {
    box-shadow: none;
    border-radius: 0px;
    background: white;
    background-image: none;

}
a.chosen-single span{
    line-height: 18px !important;
}

.vTextField{
    width: 24em;
}

a.chosen-single, .chosen-container.chosen-container-single, .chosen-container-single.chosen-single{
    position: absolute;
    box-shadow: none !important;
    border-radius: 0px !important;
    background: white !important;
    background-image: none !important;
    font-size: 11px !important;
    height: 18px !important;
    padding-left: 2px !important;
}

.chosen-container-single .chosen-single div b {
    background-position: 0px 0px;
}

我得到了一些见解here并根据需要进行了更正。另请参阅chosen.js。希望这会有所帮助：）

无法让django选择的ChosenSelect小部件工作

2 个答案: