FilteredSelectMultiple 小部件在 1.10.1 中不起作用(在 1.8 中起作用)
FilteredSelectMultiple widget not working in 1.10.1 (Works in 1.8)
我正在为 ModelMultipleChoiceField 使用来自 django.contrib.admin.widgets 的 FilteredSelectMultiple 小部件。这在我的 django 1.8 环境中效果很好,但是当我用 1.10.1 尝试它时,它无法在 select.
之后呈现 addEvent <script>
标签
来自 forms.py
class UserCatForm(forms.ModelForm):
"""Form to select Categories for user"""
form_errors = {"required": "You must choose at least one expense category"}
cats = forms.ModelMultipleChoiceField(
error_messages=form_errors,
label="",
queryset=Categories.objects.all(),
widget=FilteredSelectMultiple("Categories", is_stacked=False, attrs={'class':'form-control'}),
)
class Meta:
name = 'UserCatForm'
model = UserCat
fields = "__all__"
widgets = {'user':forms.HiddenInput(),}
base.html
{% load staticfiles %}
<html>
<head>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_messages %}
<link rel="stylesheet" href="{% static 'css/budget.css' %}">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css" />
<script type="text/javascript" src="{% static 'js/jsi18n.js' %}"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectBox.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectFilter2.js' %}"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#id_nextDueDate" ).datepicker();
$( "#id_endDate" ).datepicker();
});
</script>
{% block title %}{% endblock %}
</head>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 well well-sm">
<h1 class="center">GreenPrint PayPlanner</h1>
<div class="row">
<div class="col-xs-6">
{% if user.is_authenticated %}
{% if user.get_full_name %}
<p>Welcome {{ user.first_name }}!
{% else %}
<p>Welcome {{ user }}!
{% endif %}
<a title="Manage Settings" href="{% url 'manage' %}"><img border="0" width="75" alt="Manage Account" src="{% static "pics/settings.png" %}"></a>
</p>
</div>
<div class="col-xs-6 text-right">
<a href="{% url 'logout' %}" class="text-warning">Logout</a>
</div>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">{% block content %}{% endblock %}</div>
</div>
<div class="row">
<div class="col-xs-12">{% block footer %}{% endblock %}</div>
</div>
</div>
</html>
manage.html - 表单模板
{% extends "base.html" %}
{% load bootstrap3 %}
{% block title %}
<title>Account Settings</title>
{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-m-3"></div>
<div class="col-m-9">
<form action="{% url 'manage' %}" method="post">
<div class="form-group">
{% csrf_token %}
{{ form.as_table }}
</div>
</div>
<div class="col-m-3"></div>
</div>
<div class="row center">
<div class="col-xs-12">
{% if is_get %}
<div class="center btn-group-vertical btn-group-lg">
<input type="submit" name="profile" value="Edit Profile" class="btn btn-primary"/>
<input type="submit" name="categories" value="Edit Categories" class="btn btn-primary"/>
<input type="submit" name="deldata" value="Delete Budget" class="btn btn-warning"/>
<input type="submit" name="delacct" value="Delete Account" class="btn btn-danger"/>
<input type="submit" name="home" value="Home" class="btn btn-default"/>
</div>
{% else %}
<div class="btn-group">
<input type="submit" name="save_{{ form.Meta.name }}" value="Save" class="btn btn-primary"/>
<input type="submit" name="cancel" value="Cancel" class="btn btn-default"/>
</div>
{% endif %}
</div>
</div>
</form>
</div>
{% endblock %}
{% block footer %}
<div class="center">{{ footer }}</div>
{% endblock %}
工作页面源表单:
<tr><th></th><td><select multiple="multiple" class="selectfilter" id="id_cats" name="cats">
<option value="1" selected="selected">Other</option>
<option value="2" selected="selected">Education</option>
<option value="3" selected="selected">Utilities</option>
</select><script type="text/javascript">addEvent(window, "load", function(e) {SelectFilter.init("id_cats", "Categories", 0, "/static/admin/"); });</script>
<input id="id_user" name="user" type="hidden" value="1" /></td></tr>
不工作页面来源:
<tr><th></th><td><select multiple="multiple" class="selectfilter" data-field-name="Categories" data-is-stacked="0" id="id_cats" name="cats" required>
<option value="1" selected="selected">Other</option>
<option value="2" selected="selected">Utilities</option>
<option value="3" selected="selected">Education</option>
<option value="4" selected="selected">Car</option>
</select><input id="id_user" name="user" type="hidden" value="1" /></td></tr>
我添加了将脚本直接放入我的模板中,现在它可以工作了。
<div class="form-group">
{% csrf_token %}
{{ form.as_table }}
<script type="text/javascript">addEvent(window, "load", function(e) {SelectFilter.init("id_cats", "Categories", 0, "/static/admin/"); });</script>
</div>
我找到了一种更像 django-esk 的方法来解决这个问题,我想如果有人遇到这个问题我会添加它。这适用于 1.8 和 1.10.1
我将 addEvent 调用放入外部 js 文件 ./static/js/catsfilter.js
addEvent(window, "load", function(e) {SelectFilter.init("id_cats", "Categories", 0, "/static/admin/"); });
在我的表单上创建了一个媒体子类来调用 js
class Media:
js = ("js/catsfilter.js",)
并删除了对 core.js、SelectBox.js 和 SelectFilter2 的调用,替换为对我的 base.html 头部部分
中的表单媒体的调用
<script type="text/javascript" src="{% static 'js/jsi18n.js' %}"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
{{ form.media }}
我正在为 ModelMultipleChoiceField 使用来自 django.contrib.admin.widgets 的 FilteredSelectMultiple 小部件。这在我的 django 1.8 环境中效果很好,但是当我用 1.10.1 尝试它时,它无法在 select.
之后呈现 addEvent<script>
标签
来自 forms.py
class UserCatForm(forms.ModelForm):
"""Form to select Categories for user"""
form_errors = {"required": "You must choose at least one expense category"}
cats = forms.ModelMultipleChoiceField(
error_messages=form_errors,
label="",
queryset=Categories.objects.all(),
widget=FilteredSelectMultiple("Categories", is_stacked=False, attrs={'class':'form-control'}),
)
class Meta:
name = 'UserCatForm'
model = UserCat
fields = "__all__"
widgets = {'user':forms.HiddenInput(),}
base.html
{% load staticfiles %}
<html>
<head>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_messages %}
<link rel="stylesheet" href="{% static 'css/budget.css' %}">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css" />
<script type="text/javascript" src="{% static 'js/jsi18n.js' %}"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectBox.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectFilter2.js' %}"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#id_nextDueDate" ).datepicker();
$( "#id_endDate" ).datepicker();
});
</script>
{% block title %}{% endblock %}
</head>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 well well-sm">
<h1 class="center">GreenPrint PayPlanner</h1>
<div class="row">
<div class="col-xs-6">
{% if user.is_authenticated %}
{% if user.get_full_name %}
<p>Welcome {{ user.first_name }}!
{% else %}
<p>Welcome {{ user }}!
{% endif %}
<a title="Manage Settings" href="{% url 'manage' %}"><img border="0" width="75" alt="Manage Account" src="{% static "pics/settings.png" %}"></a>
</p>
</div>
<div class="col-xs-6 text-right">
<a href="{% url 'logout' %}" class="text-warning">Logout</a>
</div>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">{% block content %}{% endblock %}</div>
</div>
<div class="row">
<div class="col-xs-12">{% block footer %}{% endblock %}</div>
</div>
</div>
</html>
manage.html - 表单模板
{% extends "base.html" %}
{% load bootstrap3 %}
{% block title %}
<title>Account Settings</title>
{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-m-3"></div>
<div class="col-m-9">
<form action="{% url 'manage' %}" method="post">
<div class="form-group">
{% csrf_token %}
{{ form.as_table }}
</div>
</div>
<div class="col-m-3"></div>
</div>
<div class="row center">
<div class="col-xs-12">
{% if is_get %}
<div class="center btn-group-vertical btn-group-lg">
<input type="submit" name="profile" value="Edit Profile" class="btn btn-primary"/>
<input type="submit" name="categories" value="Edit Categories" class="btn btn-primary"/>
<input type="submit" name="deldata" value="Delete Budget" class="btn btn-warning"/>
<input type="submit" name="delacct" value="Delete Account" class="btn btn-danger"/>
<input type="submit" name="home" value="Home" class="btn btn-default"/>
</div>
{% else %}
<div class="btn-group">
<input type="submit" name="save_{{ form.Meta.name }}" value="Save" class="btn btn-primary"/>
<input type="submit" name="cancel" value="Cancel" class="btn btn-default"/>
</div>
{% endif %}
</div>
</div>
</form>
</div>
{% endblock %}
{% block footer %}
<div class="center">{{ footer }}</div>
{% endblock %}
工作页面源表单:
<tr><th></th><td><select multiple="multiple" class="selectfilter" id="id_cats" name="cats">
<option value="1" selected="selected">Other</option>
<option value="2" selected="selected">Education</option>
<option value="3" selected="selected">Utilities</option>
</select><script type="text/javascript">addEvent(window, "load", function(e) {SelectFilter.init("id_cats", "Categories", 0, "/static/admin/"); });</script>
<input id="id_user" name="user" type="hidden" value="1" /></td></tr>
不工作页面来源:
<tr><th></th><td><select multiple="multiple" class="selectfilter" data-field-name="Categories" data-is-stacked="0" id="id_cats" name="cats" required>
<option value="1" selected="selected">Other</option>
<option value="2" selected="selected">Utilities</option>
<option value="3" selected="selected">Education</option>
<option value="4" selected="selected">Car</option>
</select><input id="id_user" name="user" type="hidden" value="1" /></td></tr>
我添加了将脚本直接放入我的模板中,现在它可以工作了。
<div class="form-group">
{% csrf_token %}
{{ form.as_table }}
<script type="text/javascript">addEvent(window, "load", function(e) {SelectFilter.init("id_cats", "Categories", 0, "/static/admin/"); });</script>
</div>
我找到了一种更像 django-esk 的方法来解决这个问题,我想如果有人遇到这个问题我会添加它。这适用于 1.8 和 1.10.1
我将 addEvent 调用放入外部 js 文件 ./static/js/catsfilter.js
addEvent(window, "load", function(e) {SelectFilter.init("id_cats", "Categories", 0, "/static/admin/"); });
在我的表单上创建了一个媒体子类来调用 js
class Media:
js = ("js/catsfilter.js",)
并删除了对 core.js、SelectBox.js 和 SelectFilter2 的调用,替换为对我的 base.html 头部部分
中的表单媒体的调用 <script type="text/javascript" src="{% static 'js/jsi18n.js' %}"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
{{ form.media }}