This widget can be imported in your forms.py file and used like so:
formfield = forms.ModelMultipleChoiceField(widget=MultiSelectWidget, queryset=Model.objects.all())
The javascript is provided by Michael's Multiselect. In addition to the javascript you will need jQuery (the latest release is fine) and jQuery UI. The convenient thing is that this widget will style to match whichever jQuery UI you've 'rolled' or selected, making it highly customizable!
Hopefully this helps others who wanted a nice widget with jQuery and were sad to find there were no nice default options, enjoy! :)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | class MultiSelectWidget(forms.SelectMultiple):
class Media:
css = {
'all': (
iasettings.MEDIA_URL + 'js/michael-multiselect/css/ui.multiselect.css',
)
}
js = (
iasettings.MEDIA_URL + 'js/michael-multiselect/js/plugins/tmpl/jquery.tmpl.1.1.1.js',
iasettings.MEDIA_URL + 'js/michael-multiselect/js/plugins/blockUI/jquery.blockUI.js',
iasettings.MEDIA_URL + 'js/michael-multiselect/js/ui.multiselect.js',
)
def __init__(self, language=None, attrs=None):
self.language = language or settings.LANGUAGE_CODE[:2]
super(MultiSelectWidget, self).__init__(attrs=attrs)
def render(self, name, value, attrs=None):
rendered = super(MultiSelectWidget, self).render(name, value, attrs)
return rendered + mark_safe(u'''<script type="text/javascript">
$(document).ready(function afterReady() {
var elem = $('#id_%(name)s');
elem.multiselect();
});
</script>''' % {'name':name})
|
More like this
- Add Toggle Switch Widget to Django Forms by OgliariNatan 2 weeks, 1 day ago
- get_object_or_none by azwdevops 4 months, 1 week ago
- Mask sensitive data from logger by agusmakmun 6 months ago
- Template tag - list punctuation for a list of items by shapiromatron 1 year, 8 months ago
- JSONRequestMiddleware adds a .json() method to your HttpRequests by cdcarter 1 year, 8 months ago
Comments
Please login first before commenting.