管理的 JavaScript 自定义¶
内联表单事件¶
当一个内联表单在管理更改表单中被添加或删除时,你可能想执行一些 JavaScript。formset:add
和 formset:remove
的 jQuery 事件允许这样做。事件处理程序被传递给三个参数:
event
是jQuery
事件。$row
是新增加(或删除)的行。formsetName
是该行所属的表单集。
该事件使用 django.jQuery 命名空间 来启动。
在你的自定义 change_form.html
模板中,扩展 admin_change_form_document_ready
块并添加事件监听器代码:
{% extends 'admin/change_form.html' %}
{% load static %}
{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}
(function($) {
$(document).on('formset:added', function(event, $row, formsetName) {
if (formsetName == 'author_set') {
// Do something
}
});
$(document).on('formset:removed', function(event, $row, formsetName) {
// Row removed
});
})(django.jQuery);
有两点需要注意:
- 如果你继承了
admin/change_form.html
,JavaScript 代码必须放在模板块中,否则它不会在最终的 HTML 中呈现。 - 添加
{{ block.super }}
是因为 Django 的admin_change_form_document_ready
块中包含了 JavaScript 代码,用于处理更改表单中的各种操作,而我们也需要渲染这些代码。
有时你需要使用没有在 django.jQuery
命名空间注册的 jQuery
插件。要做到这一点,改变代码监听事件的方式。不在 django.jQuery
命名空间中封装监听器,而是监听从那里触发的事件。比如说:
{% extends 'admin/change_form.html' %}
{% load static %}
{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/unregistered_handlers.js' %}"></script>
{% endblock %}
django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
// Row added
});
django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
// Row removed
});