Неполадки при работе с выбранным django виджетом ChosenSelect

Question

Я пытаюсь настроить ModelForm в Django, который будет использовать выбранный django виджет ChosenSelect для одного из полей.Я установил django-selected, и у меня есть такой код:

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

Однако указание widgets не имеет никакого эффекта, и форма выводится одинаково независимо от того, определяю ли я ее.Есть предложения?

Answer 1

Включаете ли вы форму мультимедиа в свой шаблон?

В приведенном ниже примере шаблона предполагается, что в базовом шаблоне есть блоки 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

Вот мое решение с использованием selected.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 и selected_admin.css содержат мой сценарий инициализации и css для того, чтобы select больше походил на администратора django.Вот содержание:

selected_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();
});

selected_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;
}

Я получил некоторые идеи здесь и сделал исправления по мере необходимости.Также см. selected.js .Надеюсь, это поможет:)